javascript - 使用 Javascript/jQuery 在复选框选中/取消选中时同时显示/隐藏和启用/禁用

Question

我有以下看法:

<div>
    <label id = "show_hide_checkbox_label">Text Input?</label>
    <input type ="checkbox" class="myCheckbox" onchange="show_hide_divs()" />
</div>
<div id="text_div" hidden>
    <label id ="emp_id_input_label">Employee ID:</label>
    <input type="text" name="emp_id" id="employee_id_input"></input>
</div>
<div id="select_div">
     <label id= "emp_id_add_label">Employee ID:</label>
     <select name="emp_id" id = "employee_id">
     <option>--Select--</option>
     <option>INCB001</option>
     <option>INCB002</option>
     <option>INCB003</option>
     </select>
</div>

我想做的是:

默认情况下，复选框未选中，文本框隐藏和禁用，选择元素可见，我只能从选择元素中的选项发布数据，不能从文本框发布数据。但是，如果我选中复选框，则选择元素将隐藏和禁用，文本框可见并启用，我只能从文本框而不是从选择元素发布数据。如果我再次取消选中该复选框，行为就会反转，依此类推。

不幸的是，我下面的 jQuery 代码不允许我在复选框更改时正确禁用/启用和显示/隐藏 div。

这是我的 jQuery 代码:

    <script>
        function show_hide_divs()
        {
                if ($('.myCheckbox').is(':checked'))
                {
                    $("div#text_div").show();
                    $("div#text_div").children().prop('disabled', 'false');
                    $("div#select_div").hide();
                    $("div#select_div").children().prop('disabled', 'true');
                }
                else {
                     $("div#select_div").show();
                     $("div#select_div").children().prop('disabled', 'false');
                     $("div#text_div").hide();
                     $("div#text_div").children().prop('disabled', 'true');
                }
        }
    </script>

看来我的 jQuery 代码有问题，只是我自己搞不清楚。

Answer 1

您当前的代码很可能位于 DOM 就绪处理程序中，因此该函数实际上隐藏在包装函数的范围内。

不要在 jQuery 中使用基于属性的事件处理程序。当 jQuery 版本更灵活(支持多个处理程序)时，将事件注册与事件处理程序代码分开是没有意义的。

此外，使用 bool 值进行 bool 属性设置。如果您使用字符串，在某些浏览器中似乎是一个错误:

http://jsfiddle.net/TrueBlueAussie/3me1og4o/2/

$(function () {
    $('.myCheckbox').change(function () {
        if ($(this).is(':checked')) {
            $("div#text_div").show();
            $("div#text_div").children().prop('disabled', false);
            $("div#select_div").hide();
            $("div#select_div").children().prop('disabled', true);
        } else {
            $("div#select_div").show();
            $("div#select_div").children().prop('disabled', false);
            $("div#text_div").hide();
            $("div#text_div").children().prop('disabled', true);
        }
    });
});

这也意味着您可以在处理程序中将 checkbox clicked 引用为 this，这也更好，因为它导致在同一页面上支持多个控件(您会然后开始使其他选择器相对于单击的控件)。

注意:$(function(){}): 只是 $(document).ready(function(){}); 的便捷快捷方式p>