Как отключить кнопку до тех пор, пока не будет установлен флажок?

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

Но это не работает, и я не знаю, почему. Я не знаю, как я могу отключить кнопку (должен быть отключен также визуально).

Solution (благодаря Rory McCrossan): http://jsfiddle.net/0hvtgveh/

Answer 1

Ваша логика поодаль, попробуйте это:

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

Updated fiddle

Обратите внимание, что интерфейс кнопки не обновляется при отключении, однако disabled свойства делает изменение. Вероятно, вы захотите добавить стиль CSS, чтобы было очевидно, что кнопка отключена.

Кроме того, я изменил код, чтобы использовать событие change вместо click, чтобы лучше обслуживать людей, которые перемещаются с помощью клавиатуры.

Answer 2

Вы некорректное условие, если statement.use:

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

Demo

Answer 3

Вам нужно обновить свойство, поэтому использовать .prop() вместо .attr()

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

Хорошо читать .prop() vs .attr()

Answer 4

использование 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 5

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

Когда вы нажмете на флажок .is(":checked"), верните true, если он проверен другим мудрым возвратом false. В соответствии с выбором вашей кнопки флажка будет включена/отключена кнопка.

Demo

Answer 6

Попробовать на обработчик изменения:

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

Не забудьте установить свой атрибут Submit Submit Css на cursor: not-allowed;, следовательно, он может отключить его при загрузке страницы.

PS: Этот код заканчивается в нижней части страницы. Если выясняется, что у вас есть отдельный файл для этого, не забудьте обернуть его вокруг:

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