CODEWITHSUNDEEP
javascriptjquery
murday1983
murday1983

Reputation: 4016

.attr('checked', true)Will Not Re-add on button click

I have a form with a 'Reset' button. When i select my radio button the data from my DataTable is passed and pre-pops my fields. This working fine and does in fact pre-populate the relevant radio button

JQuery

if (modifyRecordData.startTime == 'Anytime') {
    $('#anyTimeRadioButton').attr('checked', true);
    $('#specificTimeRadioButton').removeAttr('checked');
    $('#startEndTimeFields').hide();
} else {
    $('#anyTimeRadioButton').removeAttr('checked');
    $('#specificTimeRadioButton').attr('checked', true);
    $('#startEndTimeFields').show();
    $('#startTimeHr').val(modifyRecordData.startTimeHr);
    $('#startTimeMin').val(modifyRecordData.startTimeMin);
    $('#endTimeHr').val(modifyRecordData.endTimeHr);
    $('#endTimeMin').val(modifyRecordData.endTimeMin);
}

Data returned

enter image description here

Page loaded enter image description here

Now the issue, if the user, after data load goes to update the details and selects the other radio button the hidden fields are displayed (again correct) enter image description here

Then user clicks the 'Reset' button and it fails in the correct function

$('#resetButton').mousedown(function (event) {
    buttonclicked = "Reset";
    event.stopImmediatePropagation();
    modifyRadioButtonSelection(modifyRecordData);
})

and then goes back to the initial loaded data and it does drop in the IF code above

Debuging enter image description here

Then it re-hides the hidden section (which is correct) but it does not re-tick the radio button as expected.

enter image description here

If i dont have the following code in the IF it leaves the previously selected one checked although the data falls in the IF

$('#specificTimeRadioButton').removeAttr('checked');

No idea whats going wrong at all. I even tried adding the following the 'Reset' button function but it just will not re-check the correct `radio button

$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').removeAttr('checked');

Upvotes: 1

Views: 39

Answers (1)

Álvaro González
Álvaro González

Reputation: 146460

Historically, there's been a lot of ambiguity and confusion between three related but different concepts:

  • The value of the HTML attribute in the source code.
  • The value of the HTML attribute in DOM tree.
  • The value of the JavaScript property.

To address that, jQuery/1.6.1 introduced the prop() method, which I suggest you adopt.

Upvotes: 3

Related Questions