Question

您好我有一个包含多个复选框的表单。应该是当检查主选项而子选项不是时，用户无法继续下一步。我使用下面的代码，但这可以确保当您启用和禁用另一个子选项（另一个主选项）时，您可以继续执行下一步而无需检查另一个主选项的子选项。

复选框：

<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();
        // } 
    }
});

我还使用js代码作为选项2和3的主选项和子选项。例如，在没有子选项的情况下选中主选项1并且使用子选项检查主选项2或3时，这会导致问题。然后再次启用该按钮。

因此，实际上有3个子组有子选项，当组1选中主选项且子选项不是，而组2中则是主选项和子选项，用户必须无法继续。

如果在没有子选项的情况下选中主选项，则用户不应该继续。

Answer 1

试试这个： - 确保您的复选框位于容器内，在我的示例中将使用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>

Answer 2

你的问题有些含糊不清，但我相信你可以解决这个问题。

这是非常冗长的，但它应该显示正在发生的事情。
作用：如果没有子项，则禁用后续复选框组。
如果发生这种情况，则不会取消检查子组（未指定但似乎有意义 - 例如，如果有人提交表单，那么）
如果您检查子框，它会自动检查该组的主文件。
如果需要，您必须手动取消检查组中的主人 - 可能会取消选中是否选中子框，但很容易重构这样做。
没有花哨的消息或其他未在您的问题操作中发布的字段，仅用于解决复选框
应该在生产发布之前删除对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>

如果在选中其他复选框时未选中一个复选框，则如何禁用按钮

2 个答案: