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>

我想做的是：

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

不幸的是，我在下面的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版本更灵活（支持多个处理程序）时，没有必要将事件注册与事件处理程序代码分开。

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

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中，则将脚本标记移动到body标记的末尾。如果它在外部文件中，则首先删除<script>标记。不要使用内联事件处理程序。这是小提琴：http://jsfiddle.net/mrk_m/g9Lo3u8r/1/
这个小提琴也解决了永久禁用元素的问题。它使用removeProp和addProp。

同时div显示/隐藏和启用/禁用复选框检查/取消选中使用Javascript / jQuery

3 个答案: