选中复选框设置属性，否则删除属性

on checked checkbox set attribute otherwise remove attribute

本文关键字：属性 删除 复选框 设置      更新时间：2023-09-26

我试图改变一个按钮上的disabled属性，以防复选框:

<input type="checkbox" id="terms" class="styled" name="terms">Accept <a href="#">terms of service</a>

将被选中，disabled属性应该被删除，否则它应该留在button元素上。

我让它按以下方式工作:

if(document.getElementById('terms').checked) {
    $("#registerButton").removeAttr('disabled');
}else{
    $("#registerButton").attr('disabled','disabled');
}

遗憾的是，这只能工作一次。一旦我选中复选框，按钮将不会被改变。是否有这样的功能是onchange编辑按钮?

你可以这样做:

$('#terms').change(function() {
    $("#registerButton").prop('disabled', !this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="terms" class="styled" name="terms">Accept <a href="#">terms of service</a>
<button id="registerButton">Register</button>

在javascript中:

  • 将更改事件的处理程序附加到复选框
  • 将禁用按钮属性设置为当前选中的复选框属性的值

代码片段:

document.getElementById('terms').addEventListener('change', function(e) {
  document.getElementById('registerButton').disabled = !this.checked;
});
document.getElementById('registerButton').disabled = true;
<input type="checkbox" id="terms" class="styled" name="terms">Accept <a href="#">terms of service</a>
<button type="button" id="registerButton">registerButton</button>

这对你有帮助。参考这个工作演示。

<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
</style>
<body>
<input type="checkbox" id="terms" class="styled" name="terms">Accept <a href="#">terms of service</a>
<button id="mybutton" disabled>Click on me</button>
<script type="text/javascript">
$("#terms").on('change',function(){
	var check_checkbox = $(this).prop('checked');//check the checkbox status
	if(check_checkbox == true)//if it is checked
	{
		$("#mybutton").prop('disabled',false)
	}
	else//if it is not checked
	{
		$("#mybutton").prop('disabled',true);
	}
})
</script>
</body>
</html>

相关文章：