更简单的展示,隐藏和展示方式禁用元素

时间:2014-03-27 09:52:06

标签: javascript jquery

我目前正在使用此代码&寻找一种更简单,更短的展示,隐藏和展示方式禁用我的元素......

$("#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);
    }
});

它运作正常,我只是想找一个更简单的方法...如果你知道一个更短的&更简单的方法,请分享......

3 个答案:

答案 0 :(得分:3)

您可以使用show而不是hidetoggle进行布尔检查。

jQuery toggle可用于切换项目的可见性,如下所示:$( ".target" ).toggle();

答案 1 :(得分:2)

以逗号

使用多个选择器
 $("#ReportDataStatusOptions , #reportDataOptions").hide();
 $('#chkReportPermission , #chReportDataStatus , #chReportDataCummulative , .allowedUpload , .allowedDelete').attr('checked', false);

答案 2 :(得分:1)

您可以使用模块化方法。

在函数中编写常用内容并在需要的地方调用它们。

在维护代码的同时也很有帮助。

这是你简单的代码:

$("#chReportData").click(function () {
    if ($(this)[0].checked) {
        $("#reportDataOptions").show();
    } else {
        hide_ReportDataStatusOptions();
        $("#reportDataOptions").hide();
        uncheck_chReportRbtns();
        uncheckAllowedRbtns();
    }
});

$("#chReportDataStatus").click(function () {
    if ($(this)[0].checked) {
        $("#ReportDataStatusOptions").show();
    } else if ($('#chReportDataCummulative').is('checked')) {
        hide_ReportDataStatusOptions();
        uncheckAllowedRbtns();
    } else {
        hide_ReportDataStatusOptions();
        uncheckAllowedRbtns();
    }
});

以及相应的功能:

function uncheck_AllowedRbtns(){
    $('.allowedUpload, .allowedDelete').attr('checked', false);    
}
function uncheck_chReportRbtns(){
    var txt = ['Permission', 'DataStatus', 'DataCummulative'];
    for(var i=0; i<txt.length; i++){
        $('#chReport'+txt[i]).attr('checked', false);
    }
}
function hide_ReportDataStatusOptions(){
    $("#ReportDataStatusOptions").hide();
}