Question

我尝试更改按钮上的disabled属性，以防复选框：

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

将检查

，应删除disabled属性，否则它应保留在按钮元素上。

我按照以下方式工作：

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

可悲的是，这只会工作一次。检查完复选框后，按钮将不会更改。是否有这样的功能是onchange编辑按钮？

Answer 1

你可以这样做。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在javascript中：

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

摘录：

＆＃13;

document.getElementById('terms').addEventListener('change', function(e) {
  document.getElementById('registerButton').disabled = !this.checked;
});

document.getElementById('registerButton').disabled = true;

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

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

3 个答案: