Question

我想编写一个程序，通过删除属性 jQuery代码启用和禁用复选框上的按钮。

我尝试了但它没有用。

＆＃13;

 $(document).ready(function() {
   $('#myCheckBox').on('change', function() {
     var x = $(this).attr('value');
     if (x == 'on') {
       $('#myButton').removeAttr('disabled');
     } else if (x == undefined) {
       $('#myButton').attr('disabled');
     }
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

＆＃13;

我是jQuery的初学者，请在下面评论任何查询。

Answer 1

使用.is(':checked')而不是伪造值。也取代：

$('#myButton').attr('disabled'); //Get the value

通过：

$('#myButton').attr('disabled','disabled'); //Set the value

设置值。

注意：您可以使用prop()代替：

$("#myButton").prop('disabled', !$(this).is(':checked'));

希望这有帮助。

attr() / removeAttr()代码段

＆＃13;

$(document).ready(function(){
  $('#myCheckBox').on('change',function(){
    if( $(this).is(':checked') ){
      $('#myButton').removeAttr('disabled');
    }else{
      $('#myButton').attr('disabled','disabled');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

＆＃13;

prop()代码段

＆＃13;

$(document).ready(function(){
  $('#myCheckBox').on('change',function(){
    $("#myButton").prop('disabled', !$(this).is(':checked'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

＆＃13;

Answer 2

你有点过分思考。首先使用.prop()而不是.attr()。其次，只需将disabled属性设置为复选框状态的反面：

  $('#myCheckBox').on('change', function() {
    $('#myButton').prop('disabled', !$(this).is(':checked'));
  })

$(document).ready(function() {
  $('#myCheckBox').on('change', function() {
    $('#myButton').prop('disabled', !$(this).is(':checked'));
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

Answer 3

您无需使用attr('value')使用this.checked来获取复选框状态。然后使用prop()方法设置按钮状态，如下所示。

$('#myCheckBox').on('change', function() {
    $('#myButton').prop('disabled', !this.checked); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

Answer 4

代码有两个问题：

var x = $(this).attr('value');将始终返回复选框的值，无论是否已选中。我想检查它的检查状态，它是元素上的checked属性（处理程序中的this.checked，或者$(this).prop("checked")，如果你想要更多的jQuery）。
$('#myButton').attr('disabled');是一个无操作：读取属性的值，然后将其抛弃。要设置，您可以$('#myButton').attr('disabled', 'disabled');

请注意，使用prop('disabled', trueOrFalse)是设置/清除禁用状态的首选方法。

$('#myCheckBox').on('change', function() {
    $("#myButton").prop('disabled', !this.checked);
});

但是因为您明确表示要使用该属性：

＆＃13;

$(document).ready(function() {
   $('#myCheckBox').on('change', function() {
     if (this.checked) {
       $('#myButton').removeAttr('disabled');
     } else {
       $('#myButton').attr('disabled', 'disabled');
     }
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

＆＃13;

但是这里有一个使用该属性的例子，这是真正的方法：

＆＃13;

$(document).ready(function() {
   $('#myCheckBox').on('change', function() {
     $('#myButton').prop('disabled', !this.checked);
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

＆＃13;

Answer 5

使用is的{{1}}方法。使用此JS fiddle：

checkbox

Answer 6

 $(document).ready(function() {
   $('#myCheckBox').on('change', function() {
     if ($(this).is(":checked")) {
       $('#myButton').removeAttr('disabled');
     }else{
       $('#myButton').attr('disabled', 'disabled');
     }
   });
 });

通过删除属性启用和禁用按钮

6 个答案: