如何禁用一个复选框时，其他检查

禁用按钮嗨我有一个表单与多个复选框。应该是，当主选项被选中并且子选项不被选中时，用户不能继续下一步。我使用下面的代码，但确保当您启用和禁用另一个主选项的另一个子选项时，您可以继续下一步而不检查另一个主选项的子选项。如何禁用一个复选框时，其他检查

的复选框：

<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中的主选项和子选项用户不能继续。

当没有子选项时检查主选项时，用户不应该能够继续。

来源

2017-12-18 can

你意识到你的''元素不是语义/编程组合在一起，因为他们*所有*有不同的'name'属性值？如果这是故意的，我不明白，或*知道*，你的理由，但如果它是偶然的，那么我建议将它们分组在一起：name =“group1”''''name =“group2”'等等。 –

@DavidThomas无法对它们进行分组，是否有可能使用函数修复此问题？ – can

试试这个： - 确保您的复选框是一个容器内，在我的例子会使用一个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>

来源

2017-12-18 13:51:32

所以实际上有3个组，当组1选中主选项并且子选项不是时，组2中的主选项和子选项不能够继续。 – can

不是很清楚，您的意思是说用户可以在主要选项被选中时继续吗？这3个选项？ <输入名称=“输入_3”类型=“复选框”值=“3”id =“choice_3”> –

是的，用户现在可以在检查主选项时不检查子选项而继续。 – can

-1

有歧义的一些小位上的问题，但我相信你可以用这个工作。

这是非常详细的，但它应该显示发生了什么。
它做什么：如果没有子项目，则禁用后续复选框组。
如果发生这种情况，不会取消检查子组（如果没有指定，但似乎是有意义的 - 例如，如果某人提交表单）
如果您检查子框，它会自动检查该组的主人。
如果需要，您必须手动取消组中的主设备 - 可能会取消选中是否检查否子设备，但是很容易重构。
没有花哨的消息或其他领域没有张贴在您的问题操纵，基本上只处理复选框
对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>

来源

2017-12-18 16:19:04

如何禁用一个复选框时，其他检查

回答

相关问题