4
\$\begingroup\$

I'm currently having this code & looking for a simpler and shorter way of showing, hiding & disabling my elements...

$("#chReportData").click(function(){
            if($(this)[0].checked){
                $("#reportDataOptions").show();
            } else {
                $("#ReportDataStatusOptions").hide();
                $("#reportDataOptions").hide();
                $('#chkReportPermission').attr('checked', false);
                $('#chReportDataStatus').attr('checked', false);
                $('#chReportDataCummulative').attr('checked', false);
                $('.allowedUpload').attr('checked', false);
                $('.allowedDelete').attr('checked', false);
            }
        });

        $("#chReportDataStatus").click(function() {
            if ($(this)[0].checked) {
                $("#ReportDataStatusOptions").show();
            } else if ($('#chReportDataCummulative').is('checked')) {
                $("#ReportDataStatusOptions").hide();
                $('.allowedUpload').attr('checked', false);
                $('.allowedDelete').attr('checked', false);
            } else { 
                $("#ReportDataStatusOptions").hide();
                $('.allowedUpload').attr('checked', false);
                $('.allowedDelete').attr('checked', false);
            }
        });

It works fine, I'm just looking for a simpler way... If you know of a shorter & simpler way, please share...

Added HTML...

<label class="typ3">Report Data:</label><asp:CheckBox ID="chReportData" runat="server" CssClass="floatL shad1 trans1" ClientIDMode="Static"/><br class="floatClear" />
                <span id="reportDataOptions" style="display: none;">
                    <label class="typ3">Report Management:</label><asp:CheckBox ID="chkReportPermission" runat="server" CssClass="floatL shad1 trans1" ClientIDMode="Static"/><br class="floatClear" />
                    <asp:RadioButton ID="chReportDataStatus" runat="server" ClientIDMode="Static" CssClass="floatL shad1 trans1" GroupName="reportData" Text="Report Type: Status" TextAlign="Left"/><br class="floatClear" />
                    <asp:RadioButton ID="chReportDataCummulative" runat="server" ClientIDMode="Static" CssClass="floatL shad1 trans1" GroupName="reportData" Text="Report Type: Cummulative" TextAlign="Left"/><br class="floatClear" />
                </span>

                <span id="ReportDataStatusOptions" style="display: none;">
                    <label class="typ3">Upload Files</label> <asp:CheckBox ID="chkAllowedUpload" runat="server" CssClass="floatL shad1 trans1" class="allowUpload"/><br 
                           class="floatClear"/>
                    <label class="typ3">Delete Files</label> <asp:CheckBox ID="chkAllowedDelete" runat="server" CssClass="floatL shad1 trans1" class ="allowDelete"/><br 
                           class="floatClear"/>
                </span>
\$\endgroup\$
1
  • \$\begingroup\$ can you share you html? \$\endgroup\$
    – Praveen
    Mar 27, 2014 at 11:20

2 Answers 2

2
\$\begingroup\$

Edit: now that you have shared your html I could make a better response ... http://jsfiddle.net/EjBW7/2/

There is a lot of repeated code, you could write some functions to avoid repeating the code, the branches in the second block seem redundant. You could use jquery's ability to target multiple elements in one selector.

setCheckboxValue = function (selector, enable)
{
    return $(selector).attr('checked', enable);
}

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

 if($("#chReportData").is(':checked') ){
      console.log('#chReportData show');
     $("#reportDataOptions").show();
 } else {
     console.log('#chReportData hide');

     $("#ReportDataStatusOptions, #reportDataOptions").hide();
     setCheckboxValue('#chkReportPermission, #chReportDataStatus, #chReportDataCummulative, .allowedUpload, .allowedDelete', false);
 }
});

$("#chReportDataStatus,#chReportDataCummulative").click(function() {
  if ($("#chReportDataStatus").is(':checked') ) {
       console.log('#ReportDataStatusOptions show');
    $("#ReportDataStatusOptions").show();
 } else { 
     console.log('#ReportDataStatusOptions hide');
    $("#ReportDataStatusOptions").hide();
    setCheckboxValue('.allowedUpload, .allowedDelete', false);
 }
});
\$\endgroup\$
3
  • \$\begingroup\$ jsfiddle.net/EjBW7 doesn't work! \$\endgroup\$
    – Norris
    Mar 27, 2014 at 11:17
  • \$\begingroup\$ oops sorry had not saved it!, jsfiddle.net/EjBW7/1 \$\endgroup\$ Mar 27, 2014 at 11:33
  • \$\begingroup\$ Great...! This works perfectly... I'm impressed...! \$\endgroup\$
    – Norris
    Mar 28, 2014 at 6:25
0
\$\begingroup\$

Here is how I did mine (Using Pratik Joshi's methods):

 $("#chReportData").click(function(){
            if($(this)[0].checked){
                $("#reportDataOptions").show();
            } else {
                $("#ReportDataStatusOptions , #reportDataOptions").hide();
                $('#chkReportPermission , #chReportDataStatus , #chReportDataCummulative , .allowedUpload , .allowedDelete').attr('checked', false);
            }
        });

        $("#chReportDataStatus").click(function() {
            $("#ReportDataStatusOptions").show();
        });

        $("#chReportDataCummulative").click(function() {
            $("#ReportDataStatusOptions").hide();
            $('.allowedUpload , .allowedDelete').attr('checked', false);
        });
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.