How can I enable disabled radio buttons?

The following code works great in IE, but not in FF or Safari. I can't for the life of me work out why. The code is supposed to disable radio buttons if you select the "Disable 2 radio buttons" option. It should enable the radio buttons if you select the "Enable both radio buttons" option. These both work...

However, if you don't use your mouse to move between the 2 options ("Enable..." and "Disable...") then the radio buttons do not appear to be disabled or enabled correctly, until you click anywhere else on the page (not on the radio buttons themselves).

If anyone has time/is curious/feeling helpful, please paste the code below into an html page and load it up in a browser. It works great in IE, but the problem manifests itself in FF (3 in my case) and Safari, all on Windows XP.

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  if (selTemp.selectedIndex >= 0) {
    var myOpt = selTemp.options[selTemp.selectedIndex];
    if (myOpt.attributes[0].nodeValue == '1') {
      frmTemp.transfer_to[0].disabled = true;
      frmTemp.transfer_to[1].disabled = true;
      frmTemp.transfer_to[2].checked = true;
    } else {
      frmTemp.transfer_to[0].disabled = false;
      frmTemp.transfer_to[1].disabled = false;
    }
  }
}
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="" />Choose One
    <option value="58" user_is_tsm="0" />Enable both radio buttons
    <option value="157" user_is_tsm="1" />Disable 2 radio buttons
  </select>
  <br /><br />
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium   
  <input type="radio" name="transfer_to" value="fund_amount2" />Other   
  <input type="radio" name="transfer_to" value="both" CHECKED />Both
  <br /><br />
  <input type="button" class="buttonStyle" value="Submit Request" />
</form>

Umm, this is working in IE10 and FF

3 Answers

Enable the radio buttons that are currently disabled

To get FF to mimic IE's behavior when using the keyboard, you can use the keyup event on the select box. In your example (I am not a fan of attaching event handlers this way, but that's another topic), it would be like this:

<select name="user" id="selUser" onchange="javascript:SetLocationOptions()" onkeyup="javascript:SetLocationOptions()">

Well, IE has a somewhat non-standard object model; what you're doing shouldn't work but you're getting away with it because IE is being nice to you. In Firefox and Safari, document.frm in your code evaluates to undefined.

You need to be using id values on your form elements and use document.getElementById('whatever') to return a reference to them instead of referring to non-existent properties of the document object.

So this works a bit better and may do what you're after:

Line 27: <form name="frm" id="f" ...
Line 6: var frmTemp = document.getElementById('f');

But you might want to check out this excellent book if you want to learn more about the right way of going about things: DOM Scripting by Jeremy Keith.

Also while we're on the subject, Bulletproof Ajax by the same author is also deserving of a place on your bookshelf as is JavaScript: The Good Parts by Doug Crockford.

Why not grab one of the AJAX scripting libraries, they abstract away a lot of the cross browser DOM scripting black magic and make life a hell of a lot easier.

The difference in closing style - JavaScript

JavaScript: What's the difference in closure style

What's the difference in closure style. There are two popular closure styles in javascript. The first I call anonymous constructor : new function() { var code... } and the inline executed function : (function() { var code... })(); are there differences in behaviour between those two? Is one "better" over the other? Both cases will execute the function, the only real difference is what the return value of the expression may be, and what the value of "this" will be inside the function. Basically behaviour of new expression Is effectively equivalent to var tempObject = {}; var result = expression.call(tempObject); if (result is not an object) result = tempObject; Although of course tempObject and result are transient values you can never see (they're implementation details in the interpreter), and there is no JS mechanism to do the "is not an object" check. Broadly speaking the "new function() { .. }"…