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

Question

I have the following view:

<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>

What I want to do is this:

By default, the checkbox is unchecked, the textbox is hidden and disabled and the select element is visible, and I can only post data from the options in the select element, I can not post data from textbox. But if I check the checkbox, then select element becomes hidden and disabled, and the textbox is visible and enabled, and I can only post data from textbox and not from the select element. If I uncheck the checkbox again, the behavior is reversed and so on.

Unfortunately, the jQuery code I have below doesn't allow me to disable/enable and show/hide the divs properly on checkbox change.

Here's my jQuery code:

    <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>

It seems there's something wrong with my jQuery code, only just I can't figure out myself.

Answer 1

Chances are your current code is in a DOM ready handler so the function is effectively hidden in the scope of the wrapper function.

Don't use attribute-based event handlers with jQuery. There is no point separating the event registration from the event handler code, when the jQuery version is more flexible (supports multiple handlers).

Also, use boolean values for boolean prop settings. Seems to be a bug in some browsers if you use strings:

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);
        }
    });
});

It also means you can reference the checkbox clicked as this in the handler, which is also better as it leads to supporting multiple controls on the same page (you would then start making the other selectors relative to the clicked control).

Note: $(function(){}): is just a handy shortcut for $(document).ready(function(){});

Answer 2

Check this : 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

Is the script tag included in your html itself? or show_hide_divs function visible to DOM(ie handler is registered after DOM is loaded). If script is in same html then move script tag to end of body tag. If its in external file then remove <script> tag first. Don't use inline event handler. Here is fiddle: http://jsfiddle.net/mrk_m/g9Lo3u8r/1/
This fiddle also solves your problem of disabling elements permanently. It uses removeProp and addProp.