JQuery - включение/выключение флажка
У меня есть куча флажков вроде этого. Если флажок "Проверить меня" установлен, все остальные 3 флажки должны быть включены, иначе они должны быть отключены. Как это сделать с помощью jQuery?
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>
Ответы
Ответ 1
Немного измените разметку:
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>
Ответ 2
Это самое современное решение.
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1" />Check Me
<input type="checkbox" name="chk9[120]" class="group1" />
<input type="checkbox" name="chk9[140]" class="group1" />
<input type="checkbox" name="chk9[150]" class="group1" />
</form>
$(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');
и для включения (полностью удалив атрибут) do
$("input.group1").removeAttr('disabled');
Любая версия jQuery
Если вы работаете только с одним элементом, он всегда будет быстрее использовать DOMElement.disabled = true
. Преимущество использования функций .prop()
и .attr()
состоит в том, что они будут работать со всеми согласованными элементами.
// Assuming an event handler on a checkbox
if (this.disabled)
ref: Установка "checked" для флажка с jQuery?
Ответ 3
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>
$("#chkAll").click(function() {
$(".chkGroup").attr("checked", this.checked);
});
С добавленной функциональностью, чтобы убедиться, что флажок установлен, флажок установлен/дешифрован, если отмечены все отдельные флажки:
$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});
Ответ 4
$(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');
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selecctall" name="selecctall" value="All" />
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />
Ответ 5
Вот еще один пример использования JQuery 1.10.2
$(".chkcc9").on('click', function() {
$(this)
.parents('table')
.find('.group1')
.prop('checked', $(this).is(':checked'));
});