在jQuery中，如果選中復選框，則將“啟用”類添加到按鈕，否則將按鈕保留為“禁用”

Question

我有一個帶有一堆復選框的表格。 底部有一個“批准”按鈕。 我想做的是默認情況下禁用按鈕（足夠容易），但是如果選中了復選框，則向其添加一個“啟用的類”（也相當容易）。 但是，說在選項中選中了3項，並且用戶單擊了其中一項（因此現在選擇了2項），如何使按鈕保持啟用狀態？

很抱歉newb問題，我在做設計工作很長時間之后才回到開發領域。

檢查屏幕截圖（這是使用數據表）。

我還有一個稱為復選框處理程序的函數，該函數處理選定復選框的分組並將其發送到服務。 $（'。campaign-order-approval'）是復選框的類。 謝謝

 $approveCampaign.on("click",function(e) {
  e.preventDefault();
    var orderIDs = checkboxHandler();
    var params = 'order_ids=' + orderIDs;
    aep.utils.makeProxyCall('campaigns/' + actionSettings.id + '/approveOrders/approve',checkboxHandler, checkboxHandler, 'POST', params);

                      callInProgress();
                      //utils.aeAlert($l(14012));
                      return false;

                });
 function checkboxHandler () {
            var checkboxes = [];
            $('.campaign-order-approval').each(function () {
               var $this = $(this);
               if ($this.is(':checked')) {
                checkboxes.push($(this).attr('rel'));
                }
            });
            var checkboxIDS = checkboxes.join(',');
            return checkboxIDS;

           };

Answer 1

為您的復選框onclick事件添加事件處理程序：

$('.campaign-order-approval').on('click', function () {
    $('.campaign-order-approval').each(function() {
        if ($(this).is(':checked')) {
            // If any boxes are checked, add the class and return.
            $('#SubmitButton').addClass('enabled');
            return;
        }
    });
    // Otherwise nothing is checked so remove the class.
    $('#SubmitButton').removeClass('enabled');
});

Answer 2

您好，如果您想啟用您的按鈕，如果選中兩個復選框。 如果您的復選框未在單擊時添加選中的屬性，請先添加，然后再添加。

         $('.campaign-order-approval').on('click', function() {
                var tempLen = $('.campaign-order-approval').length;
                var counter = 0;
                for (var i = 0; i < tempLen; i++) {
                    if ($('.campaign-order-approval input[type="checkbox"]').eq(i).attr("checked")) {
                        counter++;
                    }
                    if (counter >= 2) {
                        //counter = 0;
                        $('#SubmitButton').addClass('enabled');
                        //return;
                    }else{
                        $('#SubmitButton').removeClass('enabled');
                    }
                }
            });

Answer 3

我認為您已經使這一問題復雜化了。 為什么不綁定到復選框，並讓它們驅動按鈕是否被禁用。 單擊按鈕后，獲取ID。

 $('div').on('click', '.campaign-order-approval', function() { var status = 'disabled'; if ($(this).parent().find(':checked').length > 0) { status = 'enabled'; } //I'm not sure how you're disabling it with just the class, //but for the demo I'll continue disabling it via javascript $('#approveCampaign').removeClass('disabled enabled') .addClass(status) .attr('disabled', status === 'disabled'); }); $('#approveCampaignButtons').on('click', '#approveCampaign', function() { var approved = $('.campaign-order-approval:checked'); var ids = $.map(approved, function(val, index) { return $(val).attr('rel'); }); alert(ids); }); 

 .disabled { color: red; } .enabled { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div> <input rel='cb1' type='checkbox' class='campaign-order-approval'>cb1</input> <input rel='cb2' type='checkbox' class='campaign-order-approval'>cb2</input> <input rel='cb3' type='checkbox' class='campaign-order-approval'>cb3</input> <input rel='cb4' type='checkbox' class='campaign-order-approval'>cb4</input> <input rel='cb5' type='checkbox' class='campaign-order-approval'>cb5</input> <input rel='cb6' type='checkbox' class='campaign-order-approval'>cb6</input> </div> <div id="approveCampaignButtons"> <button id="approveCampaign" disabled='true' class='disabled'>Approve</button> <button id="cancelCampaign">Cancel</button> </div>