chrispepper1989 chrispepper1989 - 1 month ago 11
HTML Question

Autocheck Radio Button in JQuery (Mark a radio button as checked / unchecked based on another value)

Based on a certain value in a model from a drop down, I wanted to potentially "Auto check" a radio button.

Basically if we already knew this information from elsewhere in the system, I would simply mark the answer as "Yes".

But I'm getting a really weird graphical error, the code only works once. Subsequent calls would not "check" the radio button:



function brokenAutoCheck() {
if (HasDescription) {



$('input[name=AttachedJobDescription][value=True]').attr('checked', true);
$('input[name=AttachedJobDescription][value=False]').attr('checked', null);

$('input[name=AttachedJobDescription][value=True]').attr('disabled', true);
$('input[name=AttachedJobDescription][value=False]').attr('disabled', true);

} else {

$('input[name=AttachedJobDescription][value=True]').attr('checked', null);
$('input[name=AttachedJobDescription][value=False]').attr('checked', null);

$('input[name=AttachedJobDescription][value=True]').attr('disabled', null);
$('input[name=AttachedJobDescription][value=False]').attr('disabled', null);

}
HasDescription = !HasDescription;

}
var HasDescription = true;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Yes
<input data-val="true" data-val-required="The Attached Job Description field is required." id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="True">No
<input id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="False">




<br>
<button type="button" onclick="brokenAutoCheck()">Work Once AutoCheck</button>





Note: interestingly if you set the version of JQuery to 1.3.1 this works!

Answer

This is definitely one of those weird little problems that can work with slightly different versions of Jquery and slightly different syntax.

The following code shows you what now works for me and the corresponding none-working version (that works in Jquery 1.3.1):

function autoCheck() {
  if (HasDescription) {
    $('input[name=AttachedJobDescription][value=True]').prop('checked', true);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true);

  } else {
    $('input[name=AttachedJobDescription]').prop('checked', false);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null);

  }
  HasDescription = !HasDescription;

}



function brokenAutoCheck() {
  if (HasDescription) {



    $('input[name=AttachedJobDescription][value=True]').attr('checked', true);
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true);

  } else {

    $('input[name=AttachedJobDescription][value=True]').attr('checked', null);
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null);

  }
  HasDescription = !HasDescription;

}
var HasDescription = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Yes
<input data-val="true" data-val-required="The Attached Job Description field is required." id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="True">No
<input id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="False">



<br>
<button type="button" onclick="autoCheck()">AutoCheck (Works)</button>
<br>
<br>
<button type="button" onclick="brokenAutoCheck()">AutoCheck (Work Once )</button>
<br>

Now if you read the Jquery documentation on attr it does make a special mention of checked:

"Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties."

Which is what lead me to trying "prop" but again the behavior of prop seems to differ between versions, in our code which is 1.8.24 (within an MVC 4.0 application) simply replacing "attr" with "prop" did not work, however its does seem to work in this snippet...madness! In our version we had to remove the edit of the "no" radio button to get it to work.

I think it comes down to the fact that in HTML land a checked radio has the attribute "checked" and when its not checked, it simple does not have that attribute (as apposed to recognizing if it is true/false).

So Jquery must remove the attribute when its to set to anything but true and setting it to "true" should add it back, and somewhere along the line the must have changed the "attr" behavior to not "add" an attribute...once its been removed. At least JQuery seems to have slightly changed how to handle this, specifically after 1.6 and possibly some tweaks to be more behaviorally consistent since.

Hopefully this will be useful for anyone else having fun with Jquery and radio boxes

Comments