Контролировать третий флажок на основе состояния первых двух, используя jquery - PullRequest
Новая
       3

Контролировать третий флажок на основе состояния первых двух, используя jquery

1 голос
/ 13 июня 2010

У меня есть три флажка, и нужно отключить третий, если либо и / или из двух других отмечены. Я уверен, что есть более простой способ, чем у меня сейчас. Это превращается в то, что я считаю беспорядком, и я надеюсь, что кто-то с большим знанием jquery сможет пролить свет здесь.

Вот моя простая HTML-форма: 

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="custom.js" type="text/javascript"></script>
</head>
<body>
        <input type="checkbox" class="class" id="1">First
        <input type="checkbox" class="class" id="2">Second
        <input type="checkbox" class="class" id="3">Third
    </body>
</html>

Вот javascript, который я использую с jquery v1.4.2 

jQuery(document).ready(function() {
// watches the events of all checkboxes
$(":checkbox").click(function(){
if(
    // if both 1 and 2 are checked we don't want to enable Third until both are unchecked.
    (($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))||
    ((($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled')))||
    ((($('#1:checkbox').attr('checked'))||($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled')))
){
    // we don't want to do anything in the above events
} else if( 

    // handles the First check box
    (($('#1:checkbox').attr('checked'))||(!$('#1:checkbox').attr('checked')))||
    // handles the Second check box
    (($('#2:checkbox').attr('checked'))||(!$('#2:checkbox').attr('checked')))

){
// call the disableThird function
disableThird();
}
});

// handles enabling and disabling the Third checkbox
function disableThird(){
    var $checkbox = $('#3:checkbox');
    $checkbox.attr('disabled', !$checkbox.attr('disabled'));
};
});

По какой-то причине проверка # 3 отключит его сам. Я не понимаю почему.

Это работает, но одно из требований заключается в том, что не программист должен иметь возможность редактировать и поддерживать это. В идеале было бы здорово, если бы он мог просто добавить новые флажки в html, и это сработало бы. Класс для них определен и, насколько я знаю, не может быть изменен. Последний флажок в списке флажков будет отключен, если выбран какой-либо из перечисленных выше. Точно так же, если установлен последний флажок, он отключит все те, которые находятся над ним. Я даже не начал писать и тестировать эту часть, поскольку она быстро становится слишком сложной для непрограммиста. Я сам больше PHP-кодер, чем js, не говоря уже о jquery, кодировщике. Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 13 июня 2010

Хорошо, поэтому атрибут id не может начинаться с цифры.Кроме того, тег <label> - это хорошая вещь, которую нужно добавить, чтобы сделать текст, примыкающий к флажку, кликабельным.

Вот как я бы изменил ваш HTML: 

<label><input type="checkbox" class="chkGroup" id="chk1">First</label>
<label><input type="checkbox" class="chkGroup" id="chk2">Second</label>
<label><input type="checkbox" class="chkGroup" id="chk3">Third</label>

А вот и JavaScriptкод: 

$('.chkGroup').bind('click', function(){
    if ($('#chk1:checked,#chk2:checked').length > 0) {
        $('#chk3').attr('disabled', 'disabled').removeAttr('checked');
        $('#chk3').parent('label').css({color: '#ccc'});
    } else {
        $('#chk3').removeAttr('disabled');
        $('#chk3').parent('label').css({color: '#000'});
    }
});

Чтобы проверить, проверено ли что-либо, вы можете просто использовать селектор :checked .Я также добавил вызов css(), чтобы сделать метку серой, если соседний флажок отключен.

0 голосов
/ 13 июня 2010

Спасибо за ваш очень быстрый ответ. Вот какой-то лаконичный код и тип того, что мне нужно. Я знал, что jquery действительно может упростить это, и я делаю это более сложным. Слишком верно, что id не начинается с цифры. Спасибо за напоминание. У меня нет возможности действительно добавить метку или отредактировать HTML, так как он создается в CMS. Я пытаюсь сделать это простым пока и просто прибить js на стороне за пределами большей картины. Я забыл упомянуть, что класс является общим для других элементов управления на странице. Контролирует, что меня не интересует. Хороший код! Я взял то, что вы предоставили, и сделал несколько модификаций, и это прекрасно работает.

Вот что у меня есть: 

$(":checkbox").click(function(){
    if ($('#chk1:checked,#chk2:checked').length > 0) {
        $('#chk3').attr('disabled', 'disabled').removeAttr('checked');
    } else {
        $('#chk3').removeAttr('disabled');
    }
});

Работает как талисман при отключении # chk3 при проверке одного или обоих # chk1 и # chk2. Теперь мне просто нужно отключить # chk1 и # chk2, когда # chk3 включен и проверен. Не могли бы вы добавить эту функциональность?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...