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

Posted 2023-02-22

【中文标题】通过删除属性启用和禁用按钮[重复]

【英文标题】：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

【参考方案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 />