Question

我试图在单选按钮设置为“否”选项时禁用Web表单特定部分中的每个输入字段（并在选择“是”时还原此选项，但是没有使其正常工作。我目前有这个代码用于“观看”单选按钮并根据需要启用/禁用：

jQuery("#ReportOn").change(function () {
    if(jQuery("#ReportOff").is(":checked")) {
        // Everything working up until here , but below command does nothing.
        jQuery("#reportform > input").attr("disabled", true);
    } else if(jQuery("#ReportOn").is(":checked")) {
        jQuery("#reportform > input").removeAttr("disabled");
    }
});

表格如下：

<form method="post" action="post.php">
    <input type="radio" name="report" id="ReportOn" value="1" /><label for="ReportOn">Yes</label>
    <input type="radio" name="report" id="ReportOff" value="0" /><label for="ReportOff">No</label>
    <div id="reportform">
        <input type="text" name="title" id="ReportTitle" />
        <input type="text" name="subtitle" id="ReportSubtitle" />
    </div>
</form>

每当“报告”单选按钮设置为“否”时，应禁用表单的其余部分。

我在这里错过了什么阻止它工作？

Answer 1

这是同一任务的另一种解决方案;

$('input[name="report"]').change(function(){
    var disabled = ($(this).val() !== "1");
    $('#reportform input').attr("disabled", disabled); 
});

Answer 2

尝试更改：

jQuery("#reportform > input")

为：

jQuery("#reportform input")

Answer 3

也许你有一些错误，比如两个具有相同ID的表单？因为它对我有用，请看：http://jsfiddle.net/JqqGb/

Answer 4

您的脚本似乎有效。

确保在之后将放在HTML（ReportOn，ReportOff）中声明两个DOM元素之后。脚本不知道它们的存在。

这将有效：

<div id="something"></div> <script>$("#something").text('hello');</script>

这个不会：

<script>$("#something").text('hello');</script> <div id="something"></div>

要避免这些问题，您应该在文档完全加载后运行脚本 - document.ready（）方法。

jQuery禁用子节点

4 个答案: