CODEWITHSUNDEEP
javascriptjqueryhtml
Jason
Jason

Reputation: 794

Disabling all input elements except some in a form using jQuery

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

Upvotes: 4

Views: 15054

Answers (4)

Rahul Rk
Rahul Rk

Reputation: 1

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

Upvotes: 0

Moob
Moob

Reputation: 16204

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>

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272346

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

Upvotes: 14

Carl Reid
Carl Reid

Reputation: 780

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

Upvotes: 4

Related Questions