Javascript/jQuery: Get specific elements from form

Question

I have an extense form with around 25 inputs (text, radio and checkboxes). I want that when I click the button that opens the jQuery dialog, loads the form and set all fields except 5 of them disabled. Seems so easy, but I want that into a "generic" function. I mean, that I have this method:

function disableInputs(jQueryElement, exceptions, booleanClean) {
    //Some stuff
}

I want to get all the inputs from the jQueryElement , but ignoring all the elements with the ids that have exceptions . Exceptions is an Object like this one:

var exceptions = {
    0: 'clientId',
    1: 'clientName',
    2: 'clientFirstSurname',
    3: 'clientSecondSurname',
    4: 'clientAlias'
}

This is my full code and what I've tested, but this is the only way to make it work and, if I have recieved the third parameter ( booleanClean ), It will set value='' to all inputs , instead to the elements that weren't excluded from being disabled. That boolean works to check if you want to clean inputs when this function is called:

function disableInputs(jQueryElement, exceptions, booleanClean) {
    var inputs = jQueryElement.find('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].setAttribute('disabled', true);
        for (var attr in exceptions) {
            if (inputs[i].getAttribute('id') === exceptions[attr]) {
                inputs[i].removeAttribute('disabled');
            } else {
                if (booleanClean === true) {
                    inputs[i].value = null;
                }
            }
        }
    }
}

I know why is not working the clean "option". What I want is where I have to put that to do it properly or if I can set a condition when I get the inputs to get only the inputs that are not excluded (preferible second option for optimization and not set an attribute to each input and remove them if are excluded. Seems much easier to work).

Answer 1

I'd suggest changing the exceptions object to be a conventional array:

var exceptions = ['clientId',
                  'clientName',
                  'clientFirstSurname',
                  'clientSecondSurname',
                  'clientAlias'];

...because then you can simplify your function a lot:

function disableInputs(jQueryElement, exceptions, booleanClean) {
    var inputs = jQueryElement.find('input');
    if (exceptions.length > 0) {
        exceptions = "#" + exceptions.join(",#");
        inputs = inputs.not(exceptions);
    }
    inputs.prop("disabled",true);
    if (booleanClean)
        inputs.val("");
}

I'm a bit confused about whether you want to clean all inputs or just the ones not on the exceptions list. My code above just cleans those not on the list. To clean them all move that if(booleanClean) inputs.val(""); to before the other if statement.

Answer 2

Try

function disableInputs(jQueryElement, exceptions, booleanClean) {
    var not = jQuery.map(exceptions, function(item, index){
        return '#' + item;
    }).join(',')
    var inputs = jQueryElement.find(':input').not(not).prop('disabled', true);
    if(booleanClean){
        inputs.val('')
    }
}

Answer 3

Are you able to give a class name to the items that are exceptions? That's what I would do.

<input class="exception" />

$( "input:not(.exception)" ).prop("disabled", true);

Answer 4

Try this one:

HTML

<form>
    <input type="text" name="input1" value="val1" />
    <input type="text" name="input2" value="val2" />
    <input type="text" name="input3" value="val3" />
</form>

JS

function disableInputs(jQueryElement, exceptions, booleanClean) {

    jQueryElement.find('input').not( exceptions.join(', ') ).each(function(){

        if( booleanClean ){
            $(this).val('');
        }

        $(this).prop('disabled', true);

    });

}


var exceptions = ['input[name=input1]', 'input[name=input3]'];

disableInputs( $('form'), exceptions, true );

Here is working sample: http://jsfiddle.net/4Dwwk/