通过删除属性启用和禁用按钮[重复]答案

【问题标题】：Enable and disable button through remove attribute [duplicate]通过删除属性启用和禁用按钮[重复]
【发布时间】：2017-04-15 04:31:53
【问题描述】：

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

我试过了，但没用。

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

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

我是 jQuery 初学者，如有任何疑问，请在下方评论。

【问题讨论】：

不要查询复选框的值，改用.prop('checked')。
x==on ???你确定
使用这个fiddle

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用.is(':checked') 而不是检查值。也替换：

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

作者：

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

设置值。

注意：您可以改用prop() 来做到这一点：

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

希望这会有所帮助。

attr()/removeAttr() 片段：

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

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

prop() 片段：

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

【讨论】：

您应该使用prop() 而不是attr() 根据值进行切换。 api.jquery.com/prop
我想编写一个程序来通过删除属性启用和禁用复选框上的按钮，我只是想回答这个问题。
您正在尝试回答问题，但是您应该指示 OP 使用 .prop() 而不是 .attr()。正如 jQuery 所述（强调我的）：要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法。
@j08691 不，它是针对回答的人。

【解决方案3】：

使用checkbox 的is 方法。使用这个JSfiddle：

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

【讨论】：

【解决方案4】：

您无需使用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 />

【讨论】：

【解决方案5】：

你有点想多了。首先使用.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 />

【讨论】：

【解决方案6】：

代码有两个问题：

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

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

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

但是既然你特别说你想使用属性：

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

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

但这里有一个使用属性的例子，这确实是要走的路：

$(document).ready(function() {
   $('#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 />

【讨论】：