CODEWITHSUNDEEP
javascriptjqueryajax
SirDeimos
SirDeimos

Reputation: 93

JQuery dropdown menu is readonly but not disabled

I've got a page that has a form on it, and if a user is logged in as a non-admin account, the fields should be read-only. All of the text fields are behaving properly, but the dropdown menus still allow the value to be changed.

function setReadonly(){
    //Text Fields
    id_first_name.readOnly=true;
    id_middle_name.readOnly=true;
    id_last_name.readOnly=true;
    id_last_4_ssn.readOnly=true;
    //Dropdowns
    $("#id_gender").attr("readonly", true);
    $("#id_department").attr("readonly", true);
}

The drop-down bars are greyed out like the text fields, but the option can be changed as usual. I've tried doing

$("#id_gender").attr("disabled", true);
$("#id_gender").attr("disabled", "disabled");
$("#id_gender").prop("disabled", "disabled");

The two attr's didn't solve the problem, and the prop failed because I'm running v1.5

Upvotes: 0

Views: 533

Answers (2)

SirDeimos
SirDeimos

Reputation: 93

It turns out that I was setting the fields to read-only and disabled before the ajax call returned the form data. When it tried to fill in data to a disabled field, it automatically enabled it. The fields all stayed read-only, but any disabled attr's were removed.

Needed to do

$(document).ajaxStop(function(){
    [if user.readonly] setReadonly();
});

$("#id_gender").attr("disabled", true) worked fine.

Upvotes: 0

A J
A J

Reputation: 2140

$("id_gender").attr("disabled", true);
$("id_gender").attr("disabled", "disabled");
$("id_gender").prop("disabled", "disabled");

All the above statements have selectors that will be applied to tags "id_gender"

But from the function that you have posted in your question I believe that the above 3 statements are to be applied to the element with id "id_gender". So try simply adding the "#" before the selector are following which is the correct syntax:

$("#id_gender").attr("disabled", true);
$("#id_gender").attr("disabled", "disabled");
$("#id_gender").prop("disabled", "disabled");

Please let me know if this was helpful or if you have any queries.

Upvotes: 1

Related Questions