взаимозависимые чекбоксы

Рейтинг: 1Ответов: 2Опубликовано: 22.04.2015

Для следующей верстки

<div class="checkbox">
    <input type="checkbox" id="checkboxsub1" class="main">
    <label for="checkboxsub1">
        Критерий
    </label>
    <div class="checkbox sub">
        <input type="checkbox" id="subcheckbox1" class="sub">
        <label for="subcheckbox1">
            Этот критерий не важен
        </label>
    </div>
</div>

нужно сделать так, чтобы при нажатии внутреннего чекбокса, внешний становился disablеd.

$("input[type='checkbox'].sub ").change(function() {
    var box = $(this).parent().prevAll(".main");

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

js выше не работает. Eсли сократить до:

$("input[type='checkbox'].sub ").change(function(){
var box = $(this).parent().prevAll(".main").attr("attr",true);

то атрибут добавляется. Но только не в том случае, если в качестве атрибута указано "disabled".

Проблемы две:

  1. не считывается checkеd при смене состояния чекбокса
  2. не присваивается конкретно disablеd (prop тоже не решает проблемы)

Ответы

▲ 1Принят

Вот так ? http://jsfiddle.net/v0ak67fe/

$(document).ready(function(){
    $(".sub:checkbox ").change(function(){
        var box = $(this).parent().prevAll(".main");
        if($(this).is(':checked')){
            box.attr('disabled', 'disabled')
        }
        else{
            box.removeAttr('disabled');
        }
    });})
▲ 1

Можно чуть проще: https://jsfiddle.net/v0ak67fe/1/

$('#checkboxsub1').attr('disabled', $(this).is(':checked') ? true: false);