按鈕激活，只有當所有的複選框選中

如果用戶點擊了兩個複選框，然後按鈕（NAME =「拯救」）是活動的，否則這個按鈕沒有被激活

<label> 
<input id="accepted1" type="checkbox" />Please accept 
</label> 
<label> 
<input id="accepted2" type="checkbox" /> Please accept2 
</label> 


<button class="btn" data-toggle="modal" data-target="#warning" data-dismiss="modal" aria-hidden="true">Cancel</button> 
<button class="btn btn-primary" type="submit" id="id_complete" name="save">Complete Order</button>

我不知道

來源

2013-01-15 Angelina

這是在行動：http://jsfiddle.net/Codesleuth/swqmX/1/

$('#accepted1,#accepted2').click(function() { 
    if ($('#accepted1:checked,#accepted2:checked').length == 2) 
    $('#id_complete').removeAttr('disabled'); 
    else 
    $('#id_complete').attr('disabled','disabled'); 
});

要記住，有你的按鈕默認情況下禁用：

<button class="btn btn-primary" type="submit" id="id_complete" name="save" disabled="disabled">Complete Order</button>

來源

2013-01-15 14:59:16 Codesleuth

將按鈕設置爲默認禁用（通過將disabled="disabled" HTML屬性添加到按鈕）。然後使用is(":checked")檢查jQuery提供，如：

$("input[id^=\"accepted\"]").change(function() { 
    if($("#accepted1").is(":checked") && $("#accepted2").is(":checked")) { 
     $("#id_complete").removeAttr("disabled"); 
    } else { 
     $("#id_complete").attr("disabled", "disabled"); 
    } 
});

也看到這個活JSFiddle example。

來源

2013-01-15 14:57:43 Oldskool

你想先設置按鈕不顯示（使用CSS）。然後，當每個輸入都被改變時，檢查兩個輸入是否當前被檢查，如果是，則設置要顯示的按鈕。

$('input').on('change', function() { 
    if($('#accepted1').is(':checked') && $('#accepted2').is(':checked')) 
     // show the button 
    } else { 
     // hide the button 
    } 
});

例子：http://jsfiddle.net/vw6N4/1/

來源

2013-01-15 14:58:15 matthewpavkov

有一個else塊丟失再次隱藏它，如果用戶再次取消選中一個複選框。 –

是的，更新了我的答案。 – matthewpavkov

只是爲了確保該按鈕最初是被禁用

$("#id_complete").attr("disabled", "disabled"); 



$('input).on('change', function() { 
     var c1 = $('#accepted1').is(":checked"); 
     var c2 = $('#accepted2').is(":checked"); 

    if(c1 && c2){ 
     $("#id_complete").removeAttr("disabled"); 
    } 
    else{ 
     $("#id_complete").attr("disabled", "disabled"); 

    } 
    }

來源

2013-01-15 14:58:50

試着這麼做：

if ($('checkbox:checked').length == $('checkbox').length) 
    $('button[name="save"]').removeAttr('disabled'); 
else 
    $('button[name="save"]').attr('disabled', 'disabled');

更好地對具體類添加到所有需要複選框並檢查不是$('checkbox:checked').length == $('checkbox').length，而是$('checkbox.required:checked').length == $('checkbox.required').length

來源

2013-01-15 14:59:14

function checkSave() { 
    if ($("input[id^=accepted]:checked").length == $("input[id^=accepted]").length) { 
     $("#id_complete").prop('disabled', false); 
    } 
    else { 
     $("#id_complete").prop('disabled', true); 
    } 
} 
checkSave(); 
$("input[id^=accepted]").change(checkSave);

此處理在頁面加載時也是如此。

來源

2013-01-15 14:59:31

+1我發現真的很奇怪，你是唯一使用.prop（）.. –

這個解決方案是否工作？ [http://jsfiddle.net/rY6ms/](http://jsfiddle.net/rY6ms/） – Eli

@ user1479606在其中一個選擇器中只有一個小的語法錯誤;它現在已經修復http://jsfiddle.net/rY6ms/1/ –

我會將類檢查添加到每個複選框，然後您可以簡單地檢查兩者是否都像這樣檢查。此外，我會添加一個禁用的屬性到HTML中的完整按鈕。

$(".check").click(function() { 
    if ($(".check:checked").length == 2) 
    $("#id_complete").removeAttr("disabled"); 
    else 
    $("#id_complete").attr("disabled", ""); 
});

樣品小提琴：http://jsfiddle.net/c578C/1/

來源

2013-01-15 15:02:41

大部分的答案似乎有點囉嗦，還有一個更簡單的實現這種方式。

首先，給所有你需要進行檢查一類的check-required的元素，然後簡單地比較length或check-required針對check-required:checked長度設定在button的disabled屬性，如：

$('.check-required').change(function() { 
    $('#id_complete').prop('disabled', $('.check-required').length !== $('.check-required:checked').length); 
}).change();

如上所示，您還應該在頁面加載時觸發change事件。

與其他答案相比，其主要優點是如果您需要添加更多複選框，只要您給他們check-required類，代碼將繼續按需要工作。

Here's a fiddle

來源

2013-01-15 15:04:36 billyonecan

按鈕激活，只有當所有的複選框選中

回答

相關問題