jQuery disabling input not working

Question

I have some input elements on a page, and am trying to enable them or disable them according to the setting of a pair of radio buttons. I'm using the following Javascript function (console logging added for me to see what's going on)...

function EnableIndividualOrCompanyControls(individual) {
  console.log("EnableIndividualOrCompanyControls(" + individual + ")");
  console.log("Title value is " + $("#Title").val());
  console.log("Title was " + $("#Title").prop("disabled"));
  $("#Title").prop("disabled", !individual);
  console.log("Title is now " + $("#Title").prop("disabled"));
  console.log(" ");
  $("#Surname").prop("disabled", !individual);
  $("#CompanyName").prop("disabled", individual);
}

When the radio button value is changed, the method is getting called, and the parameter has the correct value, however the Title, Surname and CompanyName inputs are never disabled.

As sample from the console looks like this...

EnableIndividualOrCompanyControls(false)
Title value is Sir
Title was false
Title is now false

So, the function is being called, the parameter has the correct value, I am getting the Title input element correctly (as you can see from the fact that it correctly reports that its value is "Sir"), but the elements are not being disabled.

The odd thing is that I use exactly the same code elsewhere on the page, and it works fine. This function works...

function EnableOnlineControls(enable) {
  $("#UserName").prop("disabled", !enable);
  $("#Password").prop("disabled", !enable);
  $("#PasswordAgain").prop("disabled", !enable);
}

Anyone any idea why the first one doesn't work? In case it helps, here is the HTML for those form elements (surrounding divs removed for clarity)...

<input class="form-control" id="Title" name="Title" value="" />
<input class="form-control" id="Surname" name="Surname" value="" />
<input class="form-control" id="CompanyName" name="CompanyName" value="" />

I tried replacing the double quotes with single ones, but that didn't make any difference.

I suggest that you build a fiddle, bacause on my machine, your code works. — M. Page
– M. Page, Commented Nov 30, 2014 at 16:43
OK, here goes... jsfiddle.net/g2ftjq8L - if you click the "Online access" checkbox, the user name and password controls are correctly enabled/disabled, but if you change the "individual/company" radio buttons, the title, first name, surname and company name controls don't change. Thx — Avrohom Yisroel
– Avrohom Yisroel, Commented Nov 30, 2014 at 17:35
Just noticed that the fiddle includes ArinCool's suggestion as well for one of the controls, but as you can see, neither approach works. — Avrohom Yisroel
– Avrohom Yisroel, Commented Nov 30, 2014 at 17:37

Community · Accepted Answer · 2017-05-23 10:28:46Z

1

The answer to JQuery readOnly strange behavior explains your problem.

individual comes from a checkbox; it is a string. You have to cast it properly to a boolean:

$("#Surname").prop("disabled", (individual == "false" ? false : true));

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Nov 30, 2014 at 19:19

M. Page

2,8342 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Avrohom Yisroel Over a year ago

That's brilliant, thank you. I was thinking that the values coming back were Boolean, which is why I was confused. Now I realise they are plain strings, it makes sense. Thanks again.

M. Page Over a year ago

Can you please upvote my question stackoverflow.com/questions/27216987/… ? It has received -1 but I think it can be useful to other people

Avrohom Yisroel Over a year ago

Just did. It's a very clear and helpful reply in my opinion. Explain one of the reason why I hate Javascript!

Collectives™ on Stack Overflow

jQuery disabling input not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related