在表单上选择单选按钮时的 Javascript VISIBLE 和 REQUIRED 字段

Question

I am trying to write a function that will show a field based on the choice of a radio button, AND make that field required. BUT, if the the said choice is not made, then the field is hidden and not required. I have the toggle view working - meaning it shows if the first radio button is chosen, but I have not been able to get it to be required. The field SSN is only visible if the choice 1 of field SocialSecurity is chosen.

Here is the radio button on the form:

Do you have a Social Security Number?

• (choice 1) As a US Citizen, permanent resident, or temporary working resident, I have a Social Security Number.

• (choice 2)Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.

Please look at my code:

$('.field.SocialSecurity input[type=radio]').on("change", function()
{
  switch($(this).val())
  {
    case 'As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.':
                $('.field.SSN').show();
                $('.field.SSN').attr('required', '');
                $('.field.SSN').attr('data-error', 'Please enter your Social Security Number.');
      break;

    case 'Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.':
        $('.field.SSN').hide();
        $('.field.SSN').removeAttr('required');
        $('.field.SSN').removeAttr('data-error');

      break;
  }     
});

Answer 1

Sometimes it depends on your jquery version why the attr function does not work. Instead of calling the removeAttr method, can you also set the value to false explicitly? Try this out:

.attr(attribute,value); // syntax

.attr("required", true);
// is the equivalent for required="required"

.attr("required", false);

// Using .prop

.prop(property,value) // syntax

.prop("required", true);
// is the equivalent for required=""

.prop("required", false);

Answer 2

Like this?

 $('.field.SocialSecurity input[type=radio]').on("change", function()
{
  switch($(this).val())
  {
    case 'As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.':
                $('.field.SSN').show();
                $('.field.SSN').prop('required', true);
                $('.field.SSN').prop('data-error', 'Please enter your Social Security Number.');
      break;

    case 'Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.':
        $('.field.SSN').hide();
        $('.field.SSN').prop('required', false);

      break;
  }     
});