mercredi 30 septembre 2020

making a radio button behave like a checkbox

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