J'ai créé un script afin de contrôler les cases à cocher maître et esclave (vérification et désélection automatique).
Voici mon 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!");
}
});
});
Et voici mon HTML:
<input type="checkbox" id="myCheck" checked="checked" /> Checkbox Master<br />
<input type="checkbox" class="myCheck" value="1" /> Checkbox Slave 1<br />
<input type="checkbox" class="myCheck" value="1" /> Checkbox Slave 2
Regardez mon simple JsFiddle pour comprendre le problème.
EDIT 1: Comme Inser l’a dit, le problème se pose avec jQuery 1.9.2 et les versions ultérieures. Plus de problème avec jQuery 1.8.3. Étrange...
EDIT 2: Inser a trouvé la solution, utilisez .prop ('vérifié', true) à la place .attr ('vérifié', true). Regardez les commentaires ci-dessous ...
Utilisez la méthode prop pour les nouvelles versions de jQuery:
$('#myCheck').prop('checked', true);
$('#myCheck').prop('checked', false);
Vous pouvez essayer ceci.
$('#myCheck').click(function() {
var checkBoxes = $(this).siblings('input[type=checkbox]');
checkBoxes.prop('checked', $(this).is(':checked') ? true : false);
});
Vous voulez peut-être simplement cocher la case à cocher principale:
$('#myCheck').click(function() {
$('.myCheck').attr('checked', false);
$(this).attr('checked', true);
});
voir ce violon .
j’ai fait quelques expériences, en fait $(':checkbox').attr('checked',false);
même si cela pouvait définir l’attribut "vérifié", mais cela ne se voit pas continuellement dans le visuel. et $(':checkbox').prop('checked', true);
celui-ci fonctionne parfaitement! J'espère que cela pourrait aider.
Je vous ai écrit un plugin pour cela:
$.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>