I am trying to disable almost all input elements in a form using jquery, but I need some input elements to be enabled. For example:

$(document).ready(function () {
    $("#document :input[name!='tloEnable']).attr("disabled", true);
});

This works great on the elements I have with the same name 'tloEnable'. However there are a few other elements that have different name attributes (filename, notifyUsers, notifyTeam). How can I include them too while disabling the remaining input elements?

$(document).ready(function () {
    $("#document :input[name!='tloEnable], [name!='filename'], [name!='notifyUsers'], [name!='notifyTeam']).attr("disabled", true);
});

I am trying to disable almost all input elements in a form using jquery, but I need some input elements to be enabled. For example:

$(document).ready(function () {
    $("#document :input[name!='tloEnable']).attr("disabled", true);
});

This works great on the elements I have with the same name 'tloEnable'. However there are a few other elements that have different name attributes (filename, notifyUsers, notifyTeam). How can I include them too while disabling the remaining input elements?

$(document).ready(function () {
    $("#document :input[name!='tloEnable], [name!='filename'], [name!='notifyUsers'], [name!='notifyTeam']).attr("disabled", true);
});

• javascript
• jquery
• html

• 8 Use a common class on the elements and make your life easier. – epascarello Commented Mar 16, 2015 at 13:39
• You could add a disabled class to the input elements which should be disabled. – Ramiz Wachtler Commented Mar 16, 2015 at 13:39
• use common class for the elements that you want to enable. – tech-gayan Commented Mar 16, 2015 at 13:41
• If, for some reason, you still don't want to use a class, you can do it this way, but it's ugly and probably harder to maintain. – blex Commented Mar 16, 2015 at 13:44

4 Answers 4

Use the .not() function and pass a selector; matched elements will be excluded:

$(document).ready(function () {
    $(":input").not("[name=tloEnable], [name=filename], [name=notifyUsers]")
        .prop("disabled", true);
});

The :not() selector works the same way:

$(document).ready(function () {
    $(":input:not([name=tloEnable], [name=filename], [name=notifyUsers])")
        .prop("disabled", true);
});

Give the inputs you wish to disable a class such as disabled-inputs. Then simply:

Jquery 1.6:

$(".disabled-inputs").prop('disabled', true);  

jQuery 1.5 and below:

$(".disabled-inputs").attr('disabled','disabled');

Salman A's solution is the one I would probably go with (assuming you can't just give the fields a classname) but you could also consider using jQuery's filter() to only select elements that match your criteria.

Here we're just checking that name does not exist in our list of fieldsNotToBeDisabled but you could easily extend it to test for anything else.

var fieldsNotToBeDisabled = new Array("tloEnable", "filename", "notifyUsers", "notifyTeam");

$("form input").filter(function(index){
    return fieldsNotToBeDisabled.indexOf($(this).attr("name"))<0;
}).prop("disabled", true);

input {border:1px solid green; }
input:disabled { border-color: red; background:#eee;}

<form>
    <input name="tloEnable" />
    <input name="filename" />
    <input name="notifyUsers" />
    <input name="notifyTeam" />
    <input name="testa" />
    <input name="testb" />
    <input name="testc" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$('input').not('#company_email_1, #company_email_2, #company_email_3, #company_email_4').attr('disabled', true)