javascript 勾选复选框时变灰（禁用）HTML 文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12385958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grey-out (disable) HTML textarea when checkbox is ticked
提问by Sophie
I don't really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:
我还不太了解 Javascript，我希望有人能帮助我了解如何解决我的问题：
My HTML form has a checkboxand then a textarea:
我的 HTML 表单有一个checkbox，然后是一个textarea：
<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>
I want it so that the textareagets disabled when the checkboxis ticked so that the user cannot click it and enter text.
我希望它textarea在checkbox被选中时被禁用，以便用户无法单击它并输入文本。
I've had a look here and on google, I couldn't find any clear examples of how to do it.
我在这里和谷歌上看过，我找不到任何明确的例子来说明如何做到这一点。
I'm guessing this can be done in Javascript, but I'm feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?
我猜这可以在 Javascript 中完成，但我感觉有点超出我的深度。有人可以向我解释如何做到这一点，最好不使用第三方库吗？
回答by techfoobar
<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>
<script>
function toggleDisabled(_checked) {
document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>
回答by Abhidev
All you have to do is when you mark the checkbox, just add the attribute disabled="disabled" in the textarea.
您所要做的就是在标记复选框时，只需在文本区域中添加属性 disabled="disabled" 即可。
Checkout the jsfiddle I have added
签出我添加的 jsfiddle
回答by chris
This extremely easy to do with jQuery. Everyone uses jQuery, so should you ;-).
使用 jQuery 非常容易做到这一点。每个人都使用 jQuery，你也应该使用 ;-)。
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" />
<textarea name="details" id="details"></textarea>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#detailsgiven").change(function() {
if($(this).is(":checked")) {
$("#details").attr("disabled", "disabled");
}
else {
$("#details").removeAttr("disabled");
}
});
});
</script>
回答by Mark
try this:
试试这个：
if ($('input:checkbox').is(':checked')) {
$('textarea').attr('disabled', 'disabled');
}
回答by Prasanth
<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>
Notice how onclickevent of checkbox is used to execute some javascript code.
请注意如何onclick使用复选框事件来执行一些 javascript 代码。
if you give your html elements ids, you can access the elements in javascripts through getElementByIdmethod of javascript DOM (document object model).
如果您提供 html 元素 ID，则可以通过getElementByIdjavascript DOM（文档对象模型）的方法访问 javascripts 中的元素。
And once you have the element, you can set/get it's attributes, do whole lot of things.
一旦你有了元素，你就可以设置/获取它的属性，做很多事情。
回答by swemon
According to my understanding to your requirement. At first, textarea is disabled. When detailsgiven checkbox is checked, textarea is enabled and checkbox is disabled so that he cannot changed. Try like this.
根据我对你的要求的理解。首先，textarea 被禁用。当详细信息复选框被选中时，textarea 被启用，复选框被禁用，因此他无法更改。像这样尝试。
<!DOCTYPE html>
<html>
<head>
<script>
function valueChanged()
{
var element1 = document.getElementById("detailsgiven");
var element2 = document.getElementById("details");
if(element1.checked)
{
element2.disabled=false;
element1.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/>
<textarea name="details" id="details" disabled="true"></textarea>
</form>
</body>
</html>
