Question

我真的不太了解Javascript，我希望有人能帮助我理解如何解决我的问题：

我的HTML表单包含checkbox，然后是textarea：

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

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

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

我猜这可以在Javascript中完成，但我感觉有点超出我的深度。有人可以向我解释如何执行此操作，最好不使用第三方库吗？

Answer 1

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

Answer 2

您只需勾选复选框，只需在textarea中添加属性disabled =“disabled”。

查看我添加的jsfiddle

http://jsfiddle.net/Q9Lg4/

Answer 3

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

Answer 4

试试这个：

if ($('input:checkbox').is(':checked')) {
    $('textarea').attr('disabled', 'disabled');
}

Answer 5

<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>

注意如何使用onclick复选框来执行某些javascript代码。

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

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

Answer 6

根据我对你的要求的理解。起初，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>

勾选复选框时灰显（禁用）HTML textarea

6 个答案: