禁用按鈕，如果沒有複選框被檢查jquery

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'); 
    } 
    }) 

問題是，如果我有兩個項目，選擇兩個，然後取消選擇其中之一，'刪除'按鈕再次禁用。

只有在沒有選中複選框的情況下，我如何禁用按鈕？ 我是否必須實現每個功能？

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

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

Answer 3

試試這個：獲取所有複選框選擇器在一個變量中，並將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 4

您可以使用一個變量flag算多少複選框被選中，如果ATLEAST一個被選中然後刪除禁用其他你知道的。

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