使用 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 版本更灵活（支持多个处理程序）时，将事件注册与事件处理程序代码分开是没有意义的。

此外，对布尔属性设置使用布尔值。如果您使用字符串，这似乎是某些浏览器中的错误：

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 引用为this，这也更好，因为它可以支持同一页面上的多个控件（然后您将开始制作相对于点击的其他选择器控制）。

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

Answer 2

检查这个：http://jsfiddle.net/9cdoz896/2/

JS

$('.myCheckbox').on('click',function(){
 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);
            }
    });

CSS

#text_div{
        display:none;    
}

HTML

<div>
    <label id = "show_hide_checkbox_label">Text Input?</label>
    <input type ="checkbox" class="myCheckbox" />
</div>
<div id="text_div" >
    <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>

Answer 3

脚本标签是否包含在您的 html 中？或 show_hide_divs 对 DOM 可见的函数（即在 DOM 加载后注册处理程序）。如果脚本在同一个 html 中，则将脚本标签移动到正文标签的末尾。如果它在外部文件中，则首先删除 <script> 标签。 不要使用内联事件处理程序。 这是小提琴：http://jsfiddle.net/mrk_m/g9Lo3u8r/1/
这个小提琴还解决了您永久禁用元素的问题。它使用 removeProp 和 addProp。