如何禁用一个复选框时，其他检查
禁用按钮嗨我有一个表单与多个复选框。应该是，当主选项被选中并且子选项不被选中时，用户不能继续下一步。 我使用下面的代码，但确保当您启用和禁用另一个主选项的另一个子选项时，您可以继续下一步而不检查另一个主选项的子选项。如何禁用一个复选框时，其他检查
的复选框：
<input name="input_1" type="checkbox" value="1" id="choice_1"> <input name="input_1.1" type="checkbox" value="1.1" id="choice_1_1">
<input name="input_1.2" type="checkbox" value="1.2" id="choice_1_2">
<input name="input_1.2" type="checkbox" value="1.3" id="choice_1_3">
<input name="input_1.3" type="checkbox" value="1.4" id="choice_1_4">
<input name="input_2" type="checkbox" value="2" id="choice_2">
<input name="input_2.1" type="checkbox" value="2.1" id="choice_2_1">
<input name="input_2.2" type="checkbox" value="2.2" id="choice_2_2">
<input name="input_3" type="checkbox" value="3" id="choice_3">
<input name="input_3.1" type="checkbox" value="3.1" id="choice_3_1">
<input name="input_3.2" type="checkbox" value="3.2" id="choice_3_2">
的Jquery/JS
$('#choice_1').change(function(){ if($(this).prop('checked')){
if($("#choice_1:checked").length) {
$("#field_18_104").hide(200);
}
checked = $("#choice_1_1:checked").length || $("#choice_1_2:checked").length || $("#choice_1_3:checked").length || $("#choice_1_4:checked").length;
if(!checked) {
var $diverror = $("<div id='error-form' class='error-form'><p>Error text</p></div>");
$("#input_18_26").append($diverror);
$('#form_next_button').prop('disabled', true);
return false;
} else {
$("#error-form").remove();
$('#form_next_button').prop('disabled', false);
}
} else {
$("#error-form").remove();
$('#form_next_button').prop('disabled', false);
// if($('#choice_18_26_3').prop('checked')){
// $('#choice_18_26_3').prop('checked', false).change();
// }
}
});
我也使用用于主选项和选项2和3的子选项的js代码这会导致问题例如当主选项1在没有子选项的情况下被检查并且主选项2或3被子选项检查。然后再次启用该按钮。
因此，实际上有3组子选项，当组1选中主选项并且子选项不是时，组2中的主选项和子选项用户不能继续。
当没有子选项时检查主选项时，用户不应该能够继续。
回答：
试试这个： - 确保您的复选框是一个容器内，在我的例子会使用一个div：
#EDIT
<div id="checkContainer"> <input name="input_1" type="checkbox" value="1" id="choice_1">
<input name="input_1.1" type="checkbox" value="1.1" id="choice_1_1">
<input name="input_1.2" type="checkbox" value="1.2" id="choice_1_2">
<input name="input_1.2" type="checkbox" value="1.3" id="choice_1_3">
<input name="input_1.3" type="checkbox" value="1.4" id="choice_1_4"> aaa
<input name="input_2" type="checkbox" value="2" id="choice_2">
<input name="input_2.1" type="checkbox" value="2.1" id="choice_2_1">
<input name="input_2.2" type="checkbox" value="2.2" id="choice_2_2"> bbb
<input name="input_3" type="checkbox" value="3" id="choice_3">
<input name="input_3.1" type="checkbox" value="3.1" id="choice_3_1">
<input name="input_3.2" type="checkbox" value="3.2" id="choice_3_2">
</div>
<button id="form_next_button" disabled>HI</button>
<script>
var MAIN_CHECBOX_SELECTOR = "input[type='checkbox']:not([value*='.'])";
//OR var MAIN_CHECBOX_SELECTOR = "input[type='checkbox']:not([name*='.'])";
var TOTAL_CHECKBOX = $(MAIN_CHECBOX_SELECTOR).length;
$(document).ready(function() {
$("#checkContainer").change(function() {
var _checkedCheckboxes = $(MAIN_CHECBOX_SELECTOR + ":checked");
//this might work as well:
$('#form_next_button').prop('disabled', (_checkedCheckboxes.length !== TOTAL_CHECKBOX));
// if (_checkedCheckboxes.length == TOTAL_CHECKBOX) {
// $('#form_next_button').prop('disabled', false);
// } else {
// $('#form_next_button').prop('disabled', true);
// }
});
});
</script>
回答：
有歧义的一些小位上的问题，但我相信你可以用这个工作。
- 这是非常详细的，但它应该显示发生了什么。
- 它做什么：如果没有子项目，则禁用后续复选框组。
- 如果发生这种情况，不会取消检查子组（如果没有指定，但似乎是有意义的 - 例如，如果某人提交表单）
- 如果您检查子框，它会自动检查该组的主人。
- 如果需要，您必须手动取消组中的主设备 - 可能会取消选中是否检查否子设备，但是很容易重构。
- 没有花哨的消息或其他领域没有张贴在您的问题操纵，基本上只处理复选框
- 对JS的评论应该在生产发布之前删除也许。
- 请注意，通过禁用后续组，禁用后续组，只要您从所有未选中的项开始，并且初始不可预知的已检查项目，就可以在实例化时触发此过程 - 可能是第一组，如：
$("input[name='input_1']").trigger('change');
$(function() { // change event for all named check boxes
// note these are name prefix selectors
$("input[name^='input_1']")
.add("input[name^='input_2']")
.add("input[name^='input_3']")
.on('change', function() {
console.log('change detected');
// clear any prior message
$('#showerrors').html("");
// group 1 of checkboxes
var choice1HasMaster = $("input[name='input_1']")[0].checked;
// note that dot (.) on the prefix selector to get sub group:
var choice1HasSubcheck = !!$("input[name^='input_1.']")
.filter(":checked").length;
// check master if sub checked, update master bool
choice1HasMaster = $("input[name='input_1']")[0].checked = choice1HasMaster || choice1HasSubcheck;
var choice1OK = !choice1HasSubcheck || (choice1HasMaster && choice1HasSubcheck);
// something in first group changed
if ($(this).is("input[name^='input_1']")) {
// past here if needed disable
if (choice1HasMaster && !choice1HasSubcheck) {
$("input[name^='input_2']")
.add("input[name^='input_3']")
.each(function() {
//uncheck sub group would trigger this function:
//this.checked = false;
$(this).prop('disabled', "disabled");
});
$('#showerrors').html("must check sub box group 1");
} else {
// enable next groups
$("input[name^='input_2']")
.add("input[name^='input_3']")
.each(function() {
$(this).prop('disabled', false);
});
}
}
var choice2HasMaster = $("input[name='input_2']")[0].checked;
var choice2HasSubcheck = !!$("input[name^='input_2.']")
.filter(":checked").length;
// check master if sub checked, update master bool
choice2HasMaster = $("input[name='input_2']")[0].checked = choice2HasMaster || choice2HasSubcheck;
if ($(this).is("input[name^='input_2']")) {
// past here if needed disable
if (choice2HasMaster && !choice2HasSubcheck) {
$("input[name^='input_3']")
.each(function() {
//uncheck sub group would trigger this function:
// this.checked = false;
$(this).prop('disabled', "disabled");
});
$('#showerrors').html($('#showerrors').text() + "must check sub box group 2");
} else {
$("input[name^='input_3']")
.each(function() {
$(this).prop('disabled', false);
});
}
}
var choice3HasMaster = $("input[name='input_3']")[0].checked;
var choice3HasSubcheck = !!$("input[name^='input_3.']")
.filter(":checked").length;
// check master if sub checked, update master bool
choice3HasMaster = $("input[name='input_3']")[0].checked = choice3HasMaster || choice3HasSubcheck;
if (choice3HasMaster && !choice3HasSubcheck) {
$('#showerrors').html($('#showerrors').text() + "must check sub box group 3");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input name="input_1" type="checkbox" value="1" id="choice_1">
<input name="input_1.1" type="checkbox" value="1.1" id="choice_1_1">
<input name="input_1.2" type="checkbox" value="1.2" id="choice_1_2">
<input name="input_1.2" type="checkbox" value="1.3" id="choice_1_3">
<input name="input_1.3" type="checkbox" value="1.4" id="choice_1_4"> group 2:
<input name="input_2" type="checkbox" value="2" id="choice_2">
<input name="input_2.1" type="checkbox" value="2.1" id="choice_2_1">
<input name="input_2.2" type="checkbox" value="2.2" id="choice_2_2"> group 3:
<input name="input_3" type="checkbox" value="3" id="choice_3">
<input name="input_3.1" type="checkbox" value="3.1" id="choice_3_1">
<input name="input_3.2" type="checkbox" value="3.2" id="choice_3_2">
<div id="showerrors"></div>
以上是 如何禁用一个复选框时，其他检查 的全部内容， 来源链接： utcz.com/qa/263589.html
