如何在選中復選框之前禁用按鈕？

Question

我想禁用表單按鈕，直到用戶單擊復選框。

這是我的代碼（表格的最后一部分）

<div class="checkbox">
    <input id="check" name="checkbox" type="checkbox">
    <label for="checkbox">
      Some Text Here
    </label>
  </div>
  <input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />

我嘗試了以下

$('#check').click(function(){

if($(this).attr('checked') == false){
     $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

但這不起作用，我不知道為什么。 我不知道如何禁用按鈕（也應該在視覺上禁用）。

解決方案（感謝Rory McCrossan ）： http : //jsfiddle.net/0hvtgveh/

Answer 1

你的邏輯有點不對，試試這個：

$('#check').change(function () {
    $('#btncheck').prop("disabled", !this.checked);
}).change()

更新的小提琴

請注意，按鈕的 UI 在禁用時不會更新，但是disabled屬性會發生變化。 您可能想要添加一些 CSS 樣式以明確顯示該按鈕已禁用。

此外，我更改了代碼以使用change事件而不是click以更好地滿足使用鍵盤導航的人的需求。

Answer 2

嘗試更改處理程序：

 $(function() { var chk = $('#check'); var btn = $('#btncheck'); chk.on('change', function() { btn.prop("disabled", !this.checked);//true: disabled, false: enabled }).trigger('change'); //page load trigger event });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="checkbox"> <input id="check" name="checkbox" type="checkbox"> <label for="check">Some Text Here</label><!-- for must be the id of input --> </div> <input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />

Answer 3

你需要更新屬性，所以使用.prop()而不是.attr()

$('#check').click(function() {
    $('#btncheck').prop("disabled", this.checked == false);
});

一個很好的閱讀.prop() 與 .attr()

Answer 4

$('#btncheck').attr("disabled",true);  //Initially disabled button when document loaded.
$('#check').click(function(){
    $('#btncheck').attr("disabled",!$(this).is(":checked"));   
})

當您單擊復選框時，如果選中.is(":checked")返回 true，否則返回 false。 根據您選擇的復選框按鈕，它將啟用/禁用按鈕。

演示

Answer 5

if statement.use 中的條件不正確：

$('#check').click(function(){
 if(!$(this).is(':checked')){
    $('#btncheck').attr("disabled","disabled");   
 }else
    $('#btncheck').removeAttr('disabled');
 });

演示

Answer 6

使用if($(this ).prop( "checked" )) ，而不是if($(this).attr('checked') == false)

http://jsfiddle.net/0hvtgveh/4/

$('#check').click(function(){

if($(this ).prop( "checked" )){
     $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

Answer 7

這將需要一些邏輯：

   $(function(){
      const button = $('#submit'); // The submit input id 
      button.attr('disabled', 'disabled');
      $('#checkbox').change(function() { // The checkbox id 
          if (this.checked){
            button.removeAttr('disabled')
            .css("cursor", "pointer");
          } else {
            button.attr('disabled', 'disabled')
            .css( "cursor", "not-allowed" );
          }
      });
  });

請記住將您的 css Submit Button 屬性設置為cursor: not-allowed; 因此可以在頁面加載時禁用它。

PS：此代碼轉到頁面底部。 如果事實證明您有一個單獨的文件，請不要忘記將其包裝起來：

$(document).ready(function() { // code goes here });

Answer 8

我相信處理這個問題的另一種方法是使用 document.getElementById：

if($(this).prop("checked")) {
    document.getElementById('#btncheck').disabled = false;
} else {
    document.getElementById('#btncheck').disabled = true;
}