在選中復選框上設置屬性，否則刪除屬性

Question

我正在嘗試更改按鈕上的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有沒有這樣的功能編輯按鈕？

Answer 1

您可以按照以下步驟進行操作。

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

Answer 2

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

Answer 3

這對您有幫助。 請參閱此工作演示。

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

在選中復選框上設置屬性，否則刪除屬性

問題描述

3 個解決方案

解決方案1
2 已采納 2016-09-18 13:24:09

解決方案2
1 2016-09-18 13:29:31

解決方案3
0 2016-09-18 13:34:29

在選中復選框上設置屬性，否則刪除屬性

問題描述

3 個解決方案

解決方案1 2 已采納 2016-09-18 13:24:09

解決方案2 1 2016-09-18 13:29:31

解決方案3 0 2016-09-18 13:34:29

解決方案1
2 已采納 2016-09-18 13:24:09

解決方案2
1 2016-09-18 13:29:31

解決方案3
0 2016-09-18 13:34:29