jquery 如何在选中复选框之前禁用按钮?

mitkmikd  于 2023-06-22  发布在  jQuery
关注(0)|答案(8)|浏览(170)

我想有一个表单按钮禁用,直到用户点击复选框。
这是我拥有的代码(表单的最后一部分)

<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/

xjreopfe

xjreopfe1#

你的逻辑有点不对,试试这个:

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

请注意,禁用时按钮的UI不会更新,但disabled属性会更改。您可能希望添加一些CSS样式,以使按钮明显被禁用。
另外,我更改了代码,使用change事件而不是click,以更好地满足使用键盘导航的用户的需求。
下面是一个完整的工作示例,包括上述修改:

$('#check').change(function() {
  $('#btncheck').prop("disabled", !this.checked);
});
.form input[type="checkbox"] label {
  background: #000;
  height: 30px;
  border: none;
}

.form .button {
  cursor: pointer;
  display: block;
  background: rgba(46, 204, 113, 1.0);
  width: 180px;
  margin: 0 auto;
  margin-bottom: 40px;
  padding: 16px 0;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.2s linear;
}

.form .button[disabled] {
  background-color: rgba(128, 128, 128);
  pointer-events: none;
}

.form .button:hover {
  background: rgba(46, 204, 113, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
  <form>
    <div class="field">
      <label for="username">Name</label>
      <input id="username" name="username" type="text" value="Vorname Nachname">
    </div>
    <div class="field">
      <label for="email">E-Mail Adresse</label>
      <input id="email" name="email" type="email" value="ihre@email.com">
    </div>
    <div class="field">
      <label for="password">Handicap</label>
      <input id="password" name="password" type="text" value="z.B. 3">
    </div>
    <div class="field">
      <label for="rpassword">Gäste</label>
      <input id="rpassword" name="rpassword" type="text" value="z.B. 2">
    </div>
    <div class="checkbox">
      <input id="check" name="checkbox" type="checkbox">
      <label for="checkbox">Ich bin einverstanden dass mich die Leute kontaktieren</label>
    </div>
    <input type="submit" name="anmelden" class="button" id="btncheck" value="Anmelden" disabled />
  </form>
</div>
xxhby3vn

xxhby3vn2#

在更改处理程序上尝试:

$(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" />
e3bfsja2

e3bfsja23#

您需要更新属性,因此使用.prop()而不是.attr()

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

一本好书.prop() vs .attr()

56lgkhnf

56lgkhnf4#

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

当你点击复选框.is(":checked")时,如果选中它,返回true,否则返回false。根据您的复选框按钮的选择,它将启用/禁用按钮。

Demo

gjmwrych

gjmwrych5#

if语句中的条件不正确。请用途:

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

Demo

vdgimpew

vdgimpew6#

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

z31licg07#

这需要一点逻辑:

$(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:这段代码位于页面底部。如果您有一个单独的文件,请不要忘记将其 Package 起来:
$(document).ready(function() { // code goes here });

5t7ly7z5

5t7ly7z58#

我相信另一种处理这个问题的方法是使用document.getElementById:

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

相关问题