HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Simpler way of showing, hiding & disabling elements

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
showingelementshidingwaysimplerdisabling

Problem

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

Report Data:
                
                    Report Management:
                    
                    
                

                
                    Upload Files 
                    Delete Files 
                

Solution

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

Code Snippets

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

Context

StackExchange Code Review Q#45475, answer score: 2

Revisions (0)

No revisions yet.