Показать сообщение отдельно
  #18 (permalink)  
Старый 10.10.2015, 15:52
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

lolpops,
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        dl {
            margin-bottom:50px;
        }

        dl dt {
            background:#5f9be3;
            color:#fff;
            float:left;
            font-weight:bold;
            margin-right:10px;
            padding:5px;
            width:100px;
        }

        dl dd {
            margin:2px 0;
            padding:5px 0;
        }

        .warning {
            display: none;
            border-bottom: 2px dotted red;
        }
    </style>
</head>
<body>
    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-0">Закладки</label></dt>
            <dd><input type="number" name="check[0]" id="check-0" min="0" max="100" value="30" /></dd>

            <dt><label for="check-1">Yandex.ru</label></dt>
            <dd><input type="number" name="check[1]" id="check-1" min="0" max="100" value="40" /></dd>

            <dt><label for="check-2">Google.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-2" min="0" max="100" value="20" /></dd>

            <dt><label for="check-3">Nigma.ru</label></dt>
            <dd><input type="number" name="check[3]" id="check-3" min="0" max="100" value="10" /></dd>

            <dt><label for="check-4">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-4" min="0" max="100" value="0" /></dd>

            <dt><label for="check-5">Go.mail.ru</label></dt>
            <dd><input type="number" name="check[5]" id="check-5" min="0" max="100" value="0" /></dd>

            <dt><label for="check-6">Rambler.ru</label></dt>
            <dd><input type="number" name="check[6]" id="check-6" min="0" max="100" value="0" /></dd>

            <dt><label for="check-7">Google.com.ua</label></dt>
            <dd><input type="number" name="check[7]" id="check-7" min="0" max="100" value="0" /></dd>

            <dt><label for="check-8">Meta.ua</label></dt>
            <dd><input type="number" name="check[8]" id="check-8" min="0" max="100" value="0" /></dd>

            <dt><label for="check-9">Yandex.ua</label></dt>
            <dd><input type="number" name="check[9]" id="check-9" min="0" max="100" value="0" /></dd>

            <dt><label for="check-10">Bigmir.net</label></dt>
            <dd><input type="number" name="check[10]" id="check-10" min="0" max="100" value="0" /></dd>

            <dt><label for="check-11">Bing.com</label></dt>
            <dd><input type="number" name="check[11]" id="check-11" min="0" max="100" value="0" /></dd>

            <dt><label for="check-12">Yandex.com</label></dt>
            <dd><input type="number" name="check[12]" id="check-12" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-13">Закладки</label></dt>
            <dd><input type="number" name="check[13]" id="check-13" min="0" max="100" value="30" /></dd>

            <dt><label for="check-14">Yandex.ru</label></dt>
            <dd><input type="number" name="check[14]" id="check-14" min="0" max="100" value="40" /></dd>

            <dt><label for="check-15">Google.ru</label></dt>
            <dd><input type="number" name="check[15]" id="check-15" min="0" max="100" value="20" /></dd>

            <dt><label for="check-16">Nigma.ru</label></dt>
            <dd><input type="number" name="check[16]" id="check-16" min="0" max="100" value="10" /></dd>

            <dt><label for="check-17">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-17" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
        $('.search').on('change', 'input', function(event) {
            var parent = $(this).closest('.search'),
                inpElems = parent.find('input'),
                result = 0,
                warning = parent.children('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result <= 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });
    </script>
</body>
</html>
Ответить с цитированием