上選中的複選框設置屬性，否則刪除屬性

我試圖改變一個按鈕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編輯按鈕？

來源

2016-09-18 pr0b

你可以像下面。

$('#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>

來源

2016-09-18 13:24:09 Azim

在javascript中：

附上的變化的事件的處理程序的複選框
禁用的按鈕屬性設置爲當前選中的複選框屬性

s nippet：

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>

來源

2016-09-18 13:29:31 gaetanoM

這將幫助你。請參考這個工作演示。

<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(){ 
 
\t var check_checkbox = $(this).prop('checked');//check the checkbox status 
 

 
\t if(check_checkbox == true)//if it is checked 
 
\t { 
 
\t \t $("#mybutton").prop('disabled',false) 
 
\t } 
 
\t else//if it is not checked 
 
\t { 
 
\t \t $("#mybutton").prop('disabled',true); 
 
\t } 
 
}) 
 

 

 
</script> 
 
</body> 
 

 
</html>

來源

2016-09-18 13:34:29

上選中的複選框設置屬性，否則刪除屬性

回答

相關問題