Question

(new to JQuery) I have a list of around 20 or so elements that need to be disabled when the page loads. The list of elements contains the full range of HTML <input> elements, each having distinct IDs that follow a general naming convention.

        $('#rmX\\.val').prop("disabled",true);
        $('#rmX\\.unit').prop("disabled",true);
        $('#rmX\\.ba').prop("disabled",true);
        $('#rmX\\.sms\\.opt').prop("disabled",true);
        $('#rmX\\.sms\\.val').prop("disabled",true);
        $('#rmX\\.sms\\.car').prop("disabled",true);
        $('#rmX\\.em\\.opt').prop("disabled",true);
        $('#rmX\\.em\\.val').prop("disabled",true);
        $('#rmX\\.off\\.opt1').prop("disabled",true);
        $('#rmX\\.off\\.opt2').prop("disabled",true);
        $('#rmX\\.off\\.val').prop("disabled",true);
        $('#rmZ\\.end\\.vald').prop("disabled",true);
        $('#rmZ\\.end\\.valw').prop("disabled",true);
        $('#rmZ\\.end\\.valm').prop("disabled",true);
        $('#rmZ\\.end\\.valy').prop("disabled",true);
        $('#rmZ\\.date').prop("disabled",true);
        $('#rmZ\\.time').prop("disabled",true);
        $('#rmZ\\.ap').prop("disabled",true);
        $('#evt\\.sec\\.opt2').prop("disabled",true);
        $('#evt\\.sec\\.val21').prop("disabled",true);
        $('#evt\\.sec\\.val22').prop("disabled",true);

Is there a way to make this list more efficient or is this just the way ya’ll do it.

(PS. surprised there isn’t a “best-practices” tag available.)

EDIT: Changed “hidden” from original question to “disabled” as is displayed in my code.

Answer 1

Why not add a class canBeDisabled to all the elements in your #evt that you want to disable?

$("#evt .canBeDisabled").prop("disabled", true);