jquery: check and disable checkbox on check another checkbox

Question

У меня есть некоторые divs. Каждый из них содержит два флажка (каждый флажок находится в div одного класса «class3»). Я бы сказал, что, когда пользователь проверяет первый флажок, второй проверяется и отключается. Я попытался с:

$('.class1').live('click', function() { 
var n = $(this).siblings('input:checkbox'); 
if ($(this).attr('checked')) { 
    n.attr('disabled', true); 
} else { 
    n.attr('disabled',false); 
} 
return false; 
}); 

Таким образом, два флажка включен, но когда я нажимаю на первое, чек не появляется и ничего не происходит.

<div class="elements"> 
<div class="class3"> 
<input class="class1" type="checkbox" value="1" name="first" id="first" /> 
</div> 
<div class="class3"> 
<input class="class2" type="checkbox" value="1" name="second" id="second" /> 
</div> 
</div> 

Answer 1

Вы можете прикрепить событие к каждому первому флажку дивы из class1, используя что-то вроде:

$('.class1 input:first-child').live('change', function() { 

(. Я использовал изменение вместо щелчка, потому что это немного более общих) Только прикрепление первого элемента, а не всего div гарантирует, что вы будете реагировать только тогда, когда это необходимо.

Futher отключению, как вы использовали, он должен работать, но братья и сестры будут работать только если ваш первый флажок не вложен в другой элемент (например, пункт)

Пример скрипку: http://jsfiddle.net/Zqz63/

редактировать Видя html в вашем обновленном сообщении, братья и сестры действительно не работают, вы можете посмотреть в цепочке родителей, чтобы найти div .elements и посмотреть вниз на флажки (кроме выбранных)

var n = $(this).parents('.elements').find('input:checkbox').not(this); 

jsfiddle не отвечает, поэтому я переместил образец в jsbin: http://jsbin.com/ahemet/3/edit (NB, в текущей версии jsbin нет правильного выбора только первого флажка, так что событие также будет срабатывать во втором флажке, но Я считал, что выходит за рамки вашего вопроса)

редактировать 2 Используя информацию, которая class1 всегда является первым флажок и class2 всегда второй:

$('input:checkbox.class1').live('change', function() { 

    var n = $(this).parents('.elements').first().find('input:checkbox.class2'); 

    if ($(this).attr('checked')) { 
     n.attr('checked',true); 
     n.attr('disabled', true); 
    } else { 
     n.attr('disabled',false); 
    } 
}); 

тест: http://jsbin.com/ahemet/4/edit

Answer 2

Когда вы return false;, вы предотвращаете возникновение по умолчанию этого события; в случае щелчка на флажке по умолчанию выполняется проверка флажка. Просто удалите return false;, так как он ничего не положит для вас.

Кроме того, disabled является свойством элемента, так что вы должны использовать функцию .prop() установить/изменить его значение, а не функция .attr().

Answer 3

$('.class1').live('click', function() { 
    var n = $(this).siblings('input:checkbox'); 
    if ($(this).attr('checked')) { 
     n.prop('disabled', true); 
    } else { 
     n.prop('disabled', false); 
    } 
});