toggle radio button's required status depending on a dropdown list.

asked on April 5, 2021

How do I set a Radio Button to be required using JavaScript and also put it back to not required?

Q3 - is a dropdown list with the following values ('New', 'Trial', 'Update', 'Remove')

Q8 - is a radio button ('yes', 'no')

$('#q3 select').change(function () {
var s = $('select[id^="Field3"]').val()

if ((s === 'Update') || (s === 'Remove')) {
//Make it a required field
$('#q8 label').append('<span class="cf-required">*</span>');
$('#q8 input').attr('required', 'True');
} else {
//Change to not a required field
$('#q8 span.cf-required').remove();
$('#q8 input').removeClass('required').removeAttr('required');
}
})

Two issues with the code:

1) When the drop down is changed to 'Update' or 'Retire' the Radio button label and the Yes & No buttons all become required. A state that can not exist.

2) The required field on the Yes and No looks like this required="required" not like this required="True".

So when the dropdown list is 'Update' or 'Retire' the radio button looks like:

0 0

replied on April 9, 2021

I was able to get it to work in an odd way:

  function ClearRequiredField() {
  /* If either radio button is selected, one of the radio buttons has 
     to always be selected. So, we will leave the '*' showing required
     but remove the required from the fields. */
    var c0 = $('#q8').find($('input[id^="Field8-0"]:checked')).val();
    var c1 = $('#q8').find($('input[id^="Field8-1"]:checked')).val();

    if ((c0 === 'Yes') || (c1 === 'No')) {
      $('#q8 input').removeClass('choice').removeAttr('required');
      $('#q8 input').removeClass('choice').removeAttr('class');
    }
  }

  // If the drop down list's selected value changes run this code.
  $('#q3 select').change(function () { 
    var s = $('select[id^="Field3"]').val();
    
    if ((s === 'Update') || (s === 'Remove')) {
      //Remove '*' if it already exist then add '*' to show it is a required field
      // This is done so you don't get '**' showing the required field.
      $('#q8 span.cf-required').remove();
      $('#q8 .cf-label').append('<span class="cf-required">*</span>');
      $('#q8 input').attr('required', '');
      $('#q8 input').attr('class', 'group-required');
      
      ClearRequiredField(); // In case the radio button has already been checked.
    } else {
      //Change to not a required field
      $('#q8 span.cf-required').remove();
      $('#q8 input').removeClass('choice').removeAttr('required');
      $('#q8 input').removeClass('choice').removeAttr('class');
    }
  });
  
  
  // Any time a radio button is clicked, make sure the required fields are removed.
  $('#q8 input').click(function () { 
    ClearRequiredField();
  });

This only work because once a radio button is clicked in this group, you can not uncheck both buttons.

An odd work around, but it works.

0 0

Question

Question

toggle radio button's required status depending on a dropdown list.

Replies

Sign in to reply to this post.