5

我还不太了解Javascript，我希望有人可以帮助我了解如何解决我的问题：

我的 HTML 表单有一个checkbox，然后是一个textarea：

<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>

我想要它，以便在勾选textarea时被禁用，checkbox以便用户无法单击它并输入文本。

我在这里和谷歌上看过，我找不到任何明确的例子来说明如何做到这一点。

我猜这可以用 Javascript 完成，但我感觉有点超出我的深度。有人可以向我解释如何做到这一点，最好不使用第三方库吗？

4

6 回答 6

8 
<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>
于 2012-09-12T10:22:32.760 回答
0

您所要做的就是在标记复选框时，只需在 textarea 中添加属性 disabled="disabled"。

查看我添加的 jsfiddle

http://jsfiddle.net/Q9Lg4/

于 2012-09-12T10:20:51.577 回答
0

使用 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>
于 2012-09-12T10:25:19.283 回答
0

试试这个：

if ($('input:checkbox').is(':checked')) {
    $('textarea').attr('disabled', 'disabled');
}
于 2012-09-12T10:25:20.457 回答
0 
<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>

请注意onclick复选框事件如何用于执行一些 javascript 代码。

如果你给你的html元素id，你可以通过getElementByIdjavascript DOM（文档对象模型）的方法访问javascripts中的元素。

一旦你有了这个元素，你就可以设置/获取它的属性，做很多事情。

于 2012-09-12T10:25:24.447 回答
0

根据我对您的要求的理解。首先，textarea 被禁用。当 detailsgiven 复选框被选中时，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>
于 2012-09-12T10:51:54.540 回答