复选框启用 onload 以显示其他元素答案

【问题标题】：checkbox enable onload to display other elements复选框启用 onload 以显示其他元素
【发布时间】：2013-09-01 12:37:50
【问题描述】：

好的，这里的问题是允许表单从 mysql 设置中获取信息，例如启用或禁用。然后一个复选框将根据该请求确定是否要启用或禁用以下 3 个文本字段 (box123)。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
        <br>
        <input type='text' name="details" id="tb1" value='box1'>
        <br>
        <input type='text' name="details" id="tb2" value='box2'>
        <br>
        <input type='text' name="details" id="tb3" value='box3'>
        <br>
    </form>
</body>

</html

test.js Jquery 代码，允许根据激活变量启用或禁用检查

toggleInputs($('#checker'));

$('#checker').click(function () {
    toggleInputs($(this));
});

function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

虽然您已经接受了一个答案，但我觉得这个答案在某种程度上使解决方案过于复杂，并且留下了不必要的冗余。也就是说，我建议采用以下方法：

function toggleInputs(element) {
    /* using a multiple selector
       checking whether the check-box is checked or not using ':is()`,
       which returns a Boolean */
    $('#tb1, #tb2, #tb3').prop('disabled', element.is(':checked'));
}

$('#checker').change(function(){
    // event-handling (reacting to the change event)
    toggleInputs($(this));
    /* the next change() (without arguments) triggers the change event,
       and, therefore, the event-handling */
}).change();

JS Fiddle demo.

修改了上述函数（使用! 运算符），使input 为checked 和disabled 的字段可编辑，而input 未选中：

function toggleInputs(element) {
    $('#tb1, #tb2, #tb3').prop('disabled', !element.is(':checked'));
}

$('#checker').change(function(){
    toggleInputs($(this));
}).change();

JS Fiddle demo.

参考资料：

【讨论】：

上一个问题（在我编辑之前）要求以下内容：复选标记将根据 mysql 字段启用或禁用。并且这些字段需要在选中时启用，在未选中时禁用。您的示例是由其他没有阅读我的问题（在编辑之前）的人给出的，我将继续坚持快乐的解决方案。还是谢谢
例如，如果您删除了checked=checked，则复选框未选中并且字段已打开，从而使您的脚本无用
我收回了，这个脚本不起作用，在他上次编辑之前和快乐的问题一样。脚本必须位于表单下方才能工作。
我有一个新问题jsfiddle.net/Q9Lg4/46 如果我想在同一个表单上使用 2 个输入，我不能只是复制代码吗？请使用快乐的代码
如果您还有其他问题，请提出其他问题。如果您对他的答案以及如何扩展它有疑问，请询问他。不过，基本上，您需要使用相关输入包装相关复选框，并使用上下文而不是 ids 来选择正确的输入。

【解决方案2】：

给你...实际上使用 jquery 作为你的问题：

HTML

<form>
    <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
    <br>
    <input type='text' name="details" id="tb1" value='box1'>
    <br>
    <input type='text' name="details" id="tb2" value='box2'>
    <br>
    <input type='text' name="details" id="tb3" value='box3'>
    <br>
</form>

JavaScript

$(document).ready(function() {
   toggleInputs($('#checker'));
   $('#checker').click(function () {
       toggleInputs($(this));
    });
});

function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}

http://jsfiddle.net/Q9Lg4/40/

进行初始调用时，正文中的元素尚未加载。您可以在 JQuery 就绪事件函数中包装对 toggleInputs 的第一次调用，或者将包含 test.js 的脚本标记放在表单之后。

【讨论】：

我不知道为什么，但是当我在我的主机上测试它时它不起作用。
您使用的是 JQuery 还是 JavaScript？
是的，新代码不允许我将脚本放在表单上方，它仍然需要在下方
为什么不只是$('#tb1,#tb2,#tb3').prop('disabled', element.prop('checked'));？（显然是在函数内。）
@David 您的解决方案非常简洁明了。 jsfiddle.net/MVGys/9 这是您的解决方案，它可以按照他的建议进行一些小的调整。谢谢。