Jquery prop function is not working as expected

Question

I am trying to enable/disable some hidden fields based on some calculation and using jquery prop function, here is the code

function enableSelectedFieldsData(count, mapKey, index) {
    $("#code_" + mapKey + "_" + index).prop("disabled", false);
    $("#description_" + mapKey + "_" + index).prop("disabled", false);
    $("#crossRefrence_" + mapKey + "_" + index).prop("disabled", false);
    $("#image_" + mapKey + "_" + index).prop("disabled", false);
    $("#price_" + mapKey + "_" + index).prop("disabled", false);
    // disable all other fields
    for (var i = 0; i < count; i++) {
        if (i != index) {
            $("#code_" + mapKey + "_" + i).prop("disabled", true);
            $("#description_" + mapKey + "_" + i).prop("disabled", true);
            $("#crossRefrence_" + mapKey + "_" + i).prop("disabled", true);
            $("#image_" + mapKey + "_" + i).prop("disabled", true);
            $("#price_" + mapKey + "_" + i).prop("disabled", true);
        }
    }
}

Initially i am setting disable=true for all fields and based on the selection i m trying to enable selected fields while disabling other fields, since as per my knowledge disable fields never got submitted to the server on submitting the form, but in my case they are getting submitted.

on checking using firebug i saw that the disable field value for non selected item is getting set as "" like disable=""

i am not sure where i am setting things wrong, any help or pointer in this regard will really be helpful.

Edit

I have taken out the relevant section from my generated HTML and placed it at jsfiddle please have a look

Answer 1

Do you have prop() available?

prop() was added in jQuery 1.6 and is used like this:

$("input").prop('disabled', true);
$("input").prop('disabled', false);

If you are using jQuery 1.5.x or lower you can use attr() instead as seen in this FAQ - How to enable/disable form elements from the jQuery site:

// Disable #x
$('#x').attr('disabled', true);

// Enable #x
$('#x').attr('disabled', false);

// -- or --

// Disable #x
$("#x").attr('disabled', 'disabled');

// Enable #x
$("#x").removeAttr('disabled');

Assuming you are using jQuery 1.6 or higher

Your syntax looks fine. I would guess your problem is then most likely incorrect selectors.

To validate the selector contains the element reference you expect do:

 // output the selector to the console
console.log($("#code_" + mapKey + "_" + index));

If you see an element in your browser's debugging console you are looking at a valid selector, if instead you see [] the your selector is invalid.

Alternatively you can check it using the length property and alert that out:

// alert out the length of the jQuery selector
alert($("#code_" + mapKey + "_" + index).length);

If you see 0 then your selector is invalid, if you see 1 or more then your selector is correct.