For reasons far off topic, I have a set of 2 radio buttons that I need to behave like a checkbox. By this I mean, 1 of the radio buttons will be hidden and the other needs to be able to be cleared (and in actuality check the hidden one).
It looks something like this:
<ul id="id_member_field_request-demo-1">
<li>
<label for="id_member_field_request-demo-1_0"><input type="radio" name="member_field_request-demo-1" value="Please contact me to schedule a 60 minute, 1-on-1 demo" field_id="8394681" id="id_member_field_request-demo-1_0">Please contact me to schedule a 60 minute, 1-on-1 demo</label>
</li>
<li>
<label for="id_member_field_request-demo-1_1"><input type="radio" name="member_field_request-demo-1" value="false" field_id="8394681" id="id_member_field_request-demo-1_1">false</label>
</li>
</ul>
So far I have:
var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');
radio2.prop('checked', true).css('display', 'none');
radio1.click(function() {
if(radio1.is(':checked')) {
radio2.click();
}
});
Unfortunately, clicking on the visible radio button (radio1
) always returns that it's checked... and thus can never get to the checked state. I need to know if it was previously checked/unchecked.
The only way I can think to do this is to hold the current checked radio in a variable and then go from there... so I end up with this:
var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');
radio2.prop('checked', true).parent().css('display', 'block');
var checkedId = radio2.attr('id');
//console.log(checkedId);
radio1.click(function() {
if(checkedId == radio1.attr('id')) {
radio2.prop('checked', true);
checkedId = radio2.attr('id');
} else {
checkedId = radio1.attr('id');
}
});
This works - just checking to see if there's a more straightforward way?
Aucun commentaire:
Enregistrer un commentaire