locked
How to enable and disable several fields while selecting a checkbox list using javascript RRS feed

  • Question

  • I am having a check box list . whenever i am selecting a check box it should display some fields. If i am unchecking the check box the controls should be disabled.

    • Moved by Jason Dot Wang Wednesday, March 27, 2013 9:14 AM This thread is about ASP.NET
    Tuesday, March 26, 2013 5:56 AM

Answers

  • <script type="text/jscript">

    $(document).ready(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_0").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeDepartmentDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_1").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeShiftDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_2").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeSupervisorDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_3").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeOperatorDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_4").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforePackageDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_5").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeJobClassDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_6").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforePlantDiv").toggle();

    });

    });

    </script>

    Wednesday, April 3, 2013 4:01 AM

All replies

  • are you including jquery in your page?


    gimme some slamming techno!!!!

    Tuesday, March 26, 2013 6:12 AM
  • put the controls in a div... set disabled = true in an onchange event handler:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Disable Via Checkbox</title>
        <script>
            function toggleDisable(cb) {
                var theDiv = document.getElementById('theContainer1');
                theDiv.disabled = !cb.checked;
            }
        </script>
    </head>
    <body>
        <fieldset>
            <legend>Using DOM Directly</legend>
            <label for="checkbox1">Checkbox 1</label>
            <input type="checkbox" value="isChecked" id="checkbox1" onchange="toggleDisable(this)" checked="checked" />
            <div id="theContainer1">
                <div>
                    <label for="text1">Text 1</label>
                    <input type="text" id="text1" />
                </div>
                <div>
                    <label for="text2">Text 2</label>
                    <input type="text" id="text2" />
                </div>
                <div>
                    <label for="text3">Text 3</label>
                    <input type="text" id="text3" />
                </div>
            </div>
        </fieldset>
           <fieldset>
            <legend>Using JQuery</legend>
            <label for="checkbox2">Checkbox 2</label>
            <input type="checkbox" value="isChecked" id="checkbox2" checked="checked" />
            <div id="theContainer2">
                <div>
                    <label for="text1">Text 4</label>
                    <input type="text" id="text4" />
                </div>
                <div>
                    <label for="text2">Text 5</label>
                    <input type="text" id="text5" />
                </div>
                <div>
                    <label for="text3">Text 6</label>
                    <input type="text" id="text6" />
                </div>
            </div>
        </fieldset>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>   
        <script>
            $('#checkbox2').change(function () {
                $('#theContainer2').prop('disabled', !$(this).prop('checked'));
            });
        </script>
    
    </body>
       
    </html>
    


    gimme some slamming techno!!!!

    Tuesday, March 26, 2013 6:29 AM

  • Thanks for your reply,..

    I am sharing my code to you , can you check this.

    1. This is the javascript i used

    <script type="text/javascript" src="/_layouts/ASEM_Common/js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="/_layouts/ASEM_Common/js/jquery-1.9.0.min.js"></script>



     function cclChange_click(cclChange) {

            var ctrl = document.getElementById(cclChange);
            var select = ctrl.getElementsByTagName("input");
            var label = ctrl.getElementsByTagName("label")
            for (var i = 0; i < select.length; i++) {
                if (select[i].checked) {
                    var selected = select[i].value;

                    var sx = label[i].innerHTML;

                    debugger;
                    if (sx == 'Department' && select[i].checked == true) {
                        alert("dfghjdf");
                        $("#<%=BeforeDepartmentDiv.ClientID %>").css('display', 'block');

                    }
                    else if (sx == 'Department' && select[i].checked == false) {
               
                        $("#<%=BeforeDepartmentDiv.ClientID %>").css('display', 'none');
                    }
                    if (sx == 'Shift' && select[i].checked == true) {
                        $("#<%=BeforeShiftDiv.ClientID %>").css('display', 'block');
                    }
                    else {
                        $("#<%=BeforeShiftDiv.ClientID %>").css('display', 'none');

                    }

                    if (sx == 'Supervisor' && select[i].checked == true) {                   
                        $("#<%=BeforeSupervisorDiv.ClientID %>").css('display', 'block');
                    }
                    else {
                      
                        $("#<%=BeforeSupervisorDiv.ClientID %>").css('display', 'none');
                    }
                    if (sx == 'Operation' && select[i].checked == true) {
                        
                        $("#<%=BeforeOperatorDiv.ClientID %>").css('display', 'block');
                    }
                    else {
                        
                        $("#<%=BeforeOperatorDiv.ClientID %>").css('display', 'none');

                    }
                    if (sx == 'Package' && select[i].checked == true) {
                        $("#<%=BeforePackageDiv.ClientID %>").css('display', 'block');
                        
                    }
                    else {
                        $("#<%=BeforePackageDiv.ClientID %>").css('display', 'none');
                        

                    }
                    if (sx == 'Job Class' && select[i].checked == true) {
                        $("#<%=BeforeJobClassDiv.ClientID %>").css('display', 'block');
                        
                    }
                    else {
                        $("#<%=BeforeJobClassDiv.ClientID %>").css('display', 'none');
                        

                    }
                    if (sx == 'Plant' && select[i].checked == true) {
                        $("#<%=BeforePlantDiv.ClientID %>").css('display', 'block');
                        
                    }
                    else {
                        
                        $("#<%=BeforePlantDiv.ClientID %>").css('display', 'none');

                    }
                }
            }

    Tuesday, March 26, 2013 10:02 AM
  • 2. This is the checkbox list

    <asp:CheckBoxList ID="cclChange" RepeatColumns="4" runat="server">
        <asp:ListItem Text="Department" Value="0" />
        <asp:ListItem Text="Shift" Value="1" />
        <asp:ListItem Text="Supervisor" Value="2" />
        <asp:ListItem Text="Operation" Value="3" />
        <asp:ListItem Text="Package" Value="4" />
        <asp:ListItem Text="Job Class" Value="5" />
        <asp:ListItem Text="Plant" Value="6" />
    </asp:CheckBoxList>

    3. This are the fields i have to disable based on the selection of checkbox list

    <table cellpadding="0" cellspacing="0" border="1" style="height: 252px" width="80%">
        <tr>
            <td class="style2" class="labelSize">
            </td>
            <td class="style3" class="labelSize">
                Before changes
            </td>
            <td class="style1" class="labelSize">
                After Changes
            </td>
        </tr>
        <tr>
            <td class="style2">
                Shift
            </td>
            <td class="style3">
                <asp:Label ID="lblBeforeShift" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforeShiftDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterShift" AppendDataBoundItems="false" runat="server">
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Department
            </td>
            <td class="style3">
                <asp:Label ID="lblBeforeDepartment" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforeDepartmentDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterDepartment" AppendDataBoundItems="false" runat="server">
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Operator
            </td>
            <td class="style3">
                <asp:Label ID="lblBeforeOperator" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforeOperatorDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterOperator" AppendDataBoundItems="true" runat="server">
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Supervisor
            </td>
            <td class="style3">
                <asp:Label ID="lblBeforeSupervisor" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforeSupervisorDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterSupervisor" AppendDataBoundItems="true" runat="server">
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Package
            </td>
            <td class="style3">
                <asp:Label ID="lblBeforePackage" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforePackageDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterPackage" AppendDataBoundItems="true" runat="server">
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Job Class
            </td>
            <td class="style3">
                <asp:Label ID="lblBeforeJobClass" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforeJobClassDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterJobClass" AppendDataBoundItems="true" runat="server">
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Plant
            </td>
            <td class="style3">
                <asp:Label ID="lblbeforePlant" runat="server" />
            </td>
            <td class="style1">
                <div id="BeforePlantDiv" style="display: none">
                    <asp:DropDownList ID="ddlAfterPlant" AppendDataBoundItems="true" runat="server">
                        <asp:ListItem Text="'Select Plant" Value="0" />
                        <asp:ListItem Text="Plant1" Value="1" />
                        <asp:ListItem Text="Plant2" Value="2" />
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
    </table>


    Thanks once again....

    Regards,

    sathyaj

    Tuesday, March 26, 2013 10:04 AM
  • Hi sathyaj,

    Welcome to MSDN Forum.

    For javascript related questions, please refer to:http://forums.asp.net/130.aspx for better support.

    Thanks for your understanding.

    Regards,


    Lisa Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, March 27, 2013 9:07 AM
  • <script type="text/jscript">

    $(document).ready(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_0").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeDepartmentDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_1").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeShiftDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_2").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeSupervisorDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_3").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeOperatorDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_4").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforePackageDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_5").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforeJobClassDiv").toggle();

    });

    $("#ctl00_PlaceHolderMain_NewFormUserControl_cclChange_6").click(function () {

    $("#ctl00_PlaceHolderMain_NewFormUserControl_BeforePlantDiv").toggle();

    });

    });

    </script>

    Wednesday, April 3, 2013 4:01 AM