如果選中了至少一個復選框，則禁用按鈕

Question

我有如下代碼：

 $('input[type=checkbox]').click(function(event) { $('.chuis').each(function() { if(this.checked) { $('#delete_all_vm').prop("disabled",false); } else { $('#delete_all_vm').prop("disabled",true) } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <button id="delete_all_vm" disabled="disabled">Click me!</button> 

我希望如果選中5個復選框中的1個（至少選中一個復選框），則禁用具有id="delete_all_vm"的按鈕，所以當有一個復選框至少選中了一個時，它將取消按鈕id="delete_all_vm" 。 我怎樣才能做到這一點 ？

Answer 1

您幾乎擁有了它，但是您不需要遍歷所有元素。

使用它作為您的if條件。 $('.chuis').is(':checked')

 $('input[type=checkbox]').click(function(event) { if ($('.chuis').is(':checked')) { $('#delete_all_vm').prop("disabled", false); } else { $('#delete_all_vm').prop("disabled", true) } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <button id="delete_all_vm" disabled="disabled">Click me!</button> 

更新：可選方法。

如果您想將源代碼縮減一些，可以使用!$('.chuis').is(':checked')設置.prop()值，因此根本不需要條件。

 $('.chuis').click(function(){ $('#delete_all_vm').prop("disabled", !$('.chuis').is(':checked')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="chuis" type="checkbox"/> <input class="chuis" type="checkbox"/> <input class="chuis" type="checkbox"/> <input class="chuis" type="checkbox"/> <input class="chuis" type="checkbox"/> <button id="delete_all_vm" disabled="disabled">Click me!</button> 

如果您對上面的源代碼有任何疑問，請在下面發表評論，我們將盡快與您聯系。

我希望這有幫助。 編碼愉快！

Answer 2

獲取所有已選中復選框的數量，如果不為0，則啟用。

建議使用類.chuis代替input[type=checkbox]作為選擇器

 $(document).ready(function() { $(".chuis").click(function() { //Get the number of checked checkbox var num = $(".chuis:checked").length; //Check if number is not 0, enable the btn if (num !== 0) { $('#delete_all_vm').prop("disabled", false); } else { $('#delete_all_vm').prop("disabled", true); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <button id="delete_all_vm" disabled="disabled">Click me!</button> 

Answer 3

在each函數中，您將迭代所有輸入元素，並且如果選中了某個項目，則將禁用或啟用按鈕上的禁用道具。 如果選中了最后一個輸入，則只能按您期望的那樣工作。 如果檢查了前1個輸入但不檢查最后一個輸入怎么辦？ 該功能將首先啟用按鈕，然后在到達最后一個輸入時將其禁用。 因此，我認為您需要做的就是：

 $('input[type=checkbox]').click(function(event) {
      $('.chuis').each(function() {
         if(this.checked) {
           $('#delete_all_vm').prop("disabled", false);   
        }
      });
    });

Answer 4

您也可以不使用JQuery而做到這一點。

 var checkboxes = document.getElementsByClassName("chuis"); var btn = document.getElementById("delete_all_vm"); var len = checkboxes.length; var checkCounter = 0; while(len--) { var chkbox = checkboxes[len]; chkbox.onchange = function() { checkCounter += this.checked ? 1 : -1; btn.disabled = checkCounter === 0 ? true : false; }; } 

 <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <button id="delete_all_vm" disabled="disabled">Click me!</button> 

Answer 5

 $('input[type=checkbox]').click(function(event) { var checkboxes = document.querySelectorAll('input[type="checkbox"]'); var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked); if(!checkedOne ) { $('#delete_all_vm').prop("disabled",true); } else { $('#delete_all_vm').prop("disabled",false) } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <input class="chuis" type="checkbox" /> <button id="delete_all_vm" disabled="disabled">Click me!</button> 

嘗試使用此代碼，請讓我知道它是否工作正常。