如果未選中任何復選框，則禁用按鈕

Question

我有一個jquery函數用於多次刪除。

  $('input.delete-selected[type="submit"]').attr('disabled','disabled');
  $('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
  if ($(this).is(":checked")) {
        $('input.delete-selected[type="submit"]').removeAttr('disabled');
    } else {
        $('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
    }
  })

問題是，如果我有2個項目，則同時選擇這兩個項目，然后取消選擇其中一項，則“刪除”按鈕將再次禁用。

僅在未選中任何復選框的情況下才能禁用按鈕？ 我必須實現每個功能嗎？

Answer 1

使用prop() ：

$('input.delete-selected[type="submit"]').prop('disabled', ($('[id^=partners_]:checked, [id^=invitations_]:checked, [id^=clients_]:checked, [id^=partner_services_]:checked, [id^=partner_products_]:checked').length == 0));

這將根據第二個參數評估狀態disable按鈕。

如果為true ，則按鈕將被禁用，否則，按鈕將被啟用。

$('[id^=partners_]:checked, [id^=invitations_]:checked, [id^=clients_]:checked, [id^=partner_services_]:checked, [id^=partner_products_]:checked').length將獲取選中的復選框數量。

Answer 2

試試這個：將所有復選框選擇器都放在一個變量中，並將click事件綁定到該變量。 在點擊處理程序內部，查看是否選中了任何復選框，然后相應地啟用/禁用按鈕。 使用.prop()而不是.attr()

$('input.delete-selected[type="submit"]').attr('disabled','disabled');
var $checkbox = $('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]');
  $($checkbox).on("click", function (event) {
      $('input.delete-selected[type="submit"]').prop('disabled', $checkbox.is(':checked').length==0);
  });

Answer 3

您可以使用變量flag來計算選中了多少復選框，如果至少選中了一個復選框，則請取消禁用其他您知道的復選框。

  $('input.delete-selected[type="submit"]').attr('disabled','disabled');
  $('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
    var flag = 0;  //HERE IS THE VARIABLE
  if ($(this).is(":checked")) {
        flag += 1;  //HERE
    } else {
        flag -= 1;  //HERE
    }
  });

if(flag <= 0)
{
    $('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
else {
    $('input.delete-selected[type="submit"]').removeAttr('disabled');
}

Answer 4

$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
    if ($(this).siblings().andSelf().prop("checked").length > 0) {
        $('input.delete-selected[type="submit"]').removeAttr('disabled');
    } else {
        $('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
    }
})