如何禁用一個複選框時，其他檢查

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

我也使用用於主選項和選項2和3的子選項的js代碼這會導致問題例如當主選項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>