jQuery – включение / выключение флажка

У меня есть куча флажков вроде этого. Если флажок «Проверить меня» установлен, все остальные 3 флажки должны быть включены, иначе они должны быть отключены. Как это сделать с помощью jQuery?

Check Me

Измените разметку:

 
Check Me

а потом

 $(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { if (this.checked) { $("input.group1").removeAttr("disabled"); } else { $("input.group1").attr("disabled", true); } } 

Вы можете сделать это с помощью селекторов атрибутов без введения идентификатора и classов, но он медленнее и (imho) труднее читать.

Это самое современное решение.

 
Check Me
$(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { $("input.group1").prop("disabled", !this.checked); }

Ниже приведены данные об использовании для .attr() и .prop() .

jQuery 1.6+

Используйте новую функцию .prop() :

 $("input.group1").prop("disabled", true); $("input.group1").prop("disabled", false); 

jQuery 1.5 и ниже

Функция .prop() недоступна, поэтому вам нужно использовать .attr() .

Чтобы отключить флажок (установив значение атрибута disabled), выполните

 $("input.group1").attr('disabled','disabled'); 

и для включения (полностью удалив атрибут)

 $("input.group1").removeAttr('disabled'); 

Любая версия jQuery

Если вы работаете только с одним элементом, всегда будет максимально использовать DOMElement.disabled = true . Преимущество использования функций .prop() и .attr() состоит в том, что они будут работать со всеми согласованными элементами.

 // Assuming an event handler on a checkbox if (this.disabled) 

ref: Установка «checked» для флажка с jQuery?

 
Check Me
$("#chkAll").click(function() { $(".chkGroup").attr("checked", this.checked); });

С добавленной функциональностью для проверки проверки все флажки проверяются / дешифруются, если отмечены все отдельные флажки:

 $(".chkGroup").click(function() { $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length; }); 
     $(document).ready(function() { $('#InventoryMasterError').click(function(event) { //on click if(this.checked) { // check select status $('.checkerror').each(function() { //loop through each checkbox $('#selecctall').attr('disabled','disabled'); }); }else{ $('.checkerror').each(function() { //loop through each checkbox $('#selecctall').removeAttr('disabled','disabled'); }); } }); }); $(document).ready(function() { $('#selecctall').click(function(event) { //on click if(this.checked) { // check select status $('.checkbox1').each(function() { //loop through each checkbox $('#InventoryMasterError').attr('disabled','disabled'); }); }else{ $('.checkbox1').each(function() { //loop through each checkbox $('#InventoryMasterError').removeAttr('disabled','disabled'); }); } }); }); 

Вот еще один пример с использованием JQuery 1.10.2

 $(".chkcc9").on('click', function() { $(this) .parents('table') .find('.group1') .prop('checked', $(this).is(':checked')); }); 
  • Как переключить таблицу стилей CSS с помощью jQuery?
  • Ограничение флажка
  • Отображение случайных div с использованием JQuery
  • В чем разница между методами bind и live в jQuery?
  • Загрузка не выполняется, когда пользователь перетаскивает и удаляет вложение с почтового клиента
  • Как отключить кнопку в диалоговом окне JQuery UI?
  • вам нужно дважды щелкнуть после скрытия показанного ботстрапа
  • Как настроить дату Microsoft JSON?
  • Почему метод jQuery .ajax () не отправляет мой cookie сеанса?
  • Поиск идентификатора родительского div с помощью JQuery
  • В Bootstrap open Увеличить изображение в модальном
  • Давайте будем гением компьютера.