Zaznacz i odznacz pole wyboru Dynamicznie z jQuery: błąd?

Question

Zrobiłem skrypt, aby kontrolować pola podrzędne master & (automatyczne sprawdzanie i odznaczanie).

Oto mój JS:

$(document).ready(function() { 

    $('#myCheck').click(function() { 
     $('.myCheck').attr('checked', false); 
    }); 
    $('.myCheck').click(function() { 
     if ($('.myCheck').is(':checked')) { 
      $('#myCheck').attr('checked', false); 
     } else { 
      $('#myCheck').attr('checked', true); // IT DOESN'T WORK, WHY ? 
      alert("Checkbox Master must be checked, but it's not!"); 
     } 
    }); 

}); 

I tu jest mój HTML:

<input type="checkbox" id="myCheck" checked="checked" />&nbsp;&nbsp;Checkbox Master<br /> 
<input type="checkbox" class="myCheck" value="1" />&nbsp;&nbsp;Checkbox Slave 1<br /> 
<input type="checkbox" class="myCheck" value="1" />&nbsp;&nbsp;Checkbox Slave 2 

Spójrz na moim prostym JsFiddle zrozumieć problem.

EDIT 1: Tak jak powiedział Inser, problem występuje z jQuery w wersjach 1.9.2 i nowszych. Nigdy więcej problemu z jQuery 1.8.3. Dziwne ...

EDIT 2: Inser znaleźć rozwiązanie, należy .prop ('sprawdzone', true) zamiast .attr ('sprawdzone', true). Spójrz na komentarzach poniżej ...

Answer 1

Zastosowanie prop metoda dla nowych wersji jQuery:

$('#myCheck').prop('checked', true); 
$('#myCheck').prop('checked', false); 

http://jsfiddle.net/uQfMs/37/

Answer 2

Może chcesz po prostu zaznacz pole wyboru głównego:

$('#myCheck').click(function() { 
     $('.myCheck').attr('checked', false); 
     $(this).attr('checked', true); 
}); 

zobaczyć ten fiddle.

Answer 3

Można spróbować.

$('#myCheck').click(function() { 
    var checkBoxes = $(this).siblings('input[type=checkbox]'); 
    checkBoxes.prop('checked', $(this).is(':checked') ? true : false); 
}); 

Answer 4

zrobiłem pewne doświadczenia, rzeczywiście $(':checkbox').attr('checked',false); Mimo, to może ustawić „zaznaczone” atrybut, ale to nie będzie continuesly pokazuje w wizualnym. i $(':checkbox').prop('checked', true); ten działa idealnie! mam nadzieję, że to pomoże.

Answer 5

Pisałem ci wtyczki dla tego:

$.fn.dependantCheckbox = function() { 
    var $targ = $(this); 
    function syncSelection(group, action) { 
    $targ.each(function() { 
     if ($(this).data('checkbox-group') === group) { 
     $(this).prop('checked', action); 
     } 
    }); 
    }; 
    $('input[type="checkbox"][data-checkbox-group]').on('change', function() { 
    var groupSelection = $(this).data('checkbox-group'); 
    var isChecked = $(this).prop('checked'); 
    syncSelection(groupSelection, isChecked); 
    }); 
} 
$('input[type="checkbox"][data-checkbox-group]').dependantCheckbox(); 


<input data-checkbox-group="1" type="checkbox" id="test" /> 
<label for="test">test</label> 
<input data-checkbox-group="1" type="checkbox" id="test2" /> 
<label for="test2">test2</label> 
<input data-checkbox-group="2" type="checkbox" id="test3" /> 
<label for="test3">test3</label> 
<input data-checkbox-group="2" type="checkbox" id="test4" /> 
<label for="test4">test4</label> 

http://codepen.io/nicholasabrams/pen/mJqyqG