我有一个包含两个单选按钮和一个文本区域的表单。文本区域最初被禁用。当用户选择“自定义消息”单选按钮时，禁用的属性将被删除，并且文本区域变得可编辑。
现在，如果用户选择“虚拟消息”单选按钮，文本区域应再次禁用。
到目前为止我有这段代码，
document.getElementById('customMessageRadioButton').addEventListener('change', function() {
if (document.getElementById('customMessageRadioButton').checked) {
document.getElementById('customMessageTextArea').removeAttribute("disabled");
document.getElementById('customMessageTextArea').focus();
}
if (!document.getElementById('customMessageRadioButton').checked) {
document.getElementById('customMessageTextArea').setAttribute("disabled", "true");
}
});<input name="group1" id="dummy" type="radio" />Dummy Message
<input name="group1" id="customMessageRadioButton" type="radio" />Custom Message
<textarea disabled id="customMessageTextArea"></textarea>我在这里面临的问题是在这种情况下 - 当我首先选择“自定义消息”单选按钮，然后返回并选择“虚拟消息”单选按钮时，文本区域不会被禁用。
这是我的 JS Bin
附注我无法使用 jQuery。只能使用普通的 Javascript。
最佳答案
根据您的要求更新了代码，为了使代码更简单，我使用了一个标志来切换文本区域的状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<input name="group1" id="dummy" type="radio" onclick="toggleRadio(false)"/>Dummy Message
<input name="group1" id="customMessageRadioButton" onclick="toggleRadio(true)" type="radio" />Custom Message
<textarea disabled id="customMessageTextArea"></textarea>
<script>
function toggleRadio(flag){
if(!flag) {
document.getElementById('customMessageTextArea').setAttribute("disabled", "true");
} else {
document.getElementById('customMessageTextArea').removeAttribute("disabled");
document.getElementById('customMessageTextArea').focus();
}
}
</script>
</body>
</html>这是更新后的 jsbin:http://jsbin.com/gadupoheke/1/edit?html,console,output
关于javascript - 使用 javascript 切换禁用属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50731460/