Enabling or disabling input fields

Question

In my Rails app, I have a form. The form has radio buttons for entity type and has a text field for SSN and another for EIN. Based on the radio button selected, one of the text fields will be disabled and the other enabled (disabled = false).

If the user selects the radio button for entity_type_i, it should disable the EIN field, and enable SSN. For the other four radio buttons, it should do the opposite - disable SSN and enable EIN. Since I don't know JavaScript, I ended up copying and pasting the same code and just changing the name of the id (i.e. #user_entity_type_c). Basically #user_entity_type_c, #user_entity_type_p, #user_entity_type_l and #user_entity_type_o should behave the same.

Without knowing any better, the code seems like it's redundant. Is there a more efficient way to write the JavaScript?

Radio buttons for the form:

<span class="radio inline">
  <label for="user_entity_type_i">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="I" name="user[entity_type]" id="user_entity_type_i" />
    Individual / Sole Proprietor
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_c">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="C" name="user[entity_type]" id="user_entity_type_c" />
    Corporation
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_p">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="P" name="user[entity_type]" id="user_entity_type_p" />
      Partnership
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_l">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="L" name="user[entity_type]" id="user_entity_type_l" />
    Limited Liability Company
  </label>
 </span>

 <span class="radio inline">
   <label for="user_entity_type_o">
     <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="O" name="user[entity_type]" id="user_entity_type_o" />
       Other
   </label>
 </span>

The JavaScript:

<script>
  $(function(){
    $("#user_entity_type_i").change(function(){
      if($("#user_entity_type_i").prop("checked") == true){
        $("#user_ein").prop("disabled", true);
        $("#user_ssn").prop("disabled", false);
      }else{
        $("#user_ein").prop("disabled", false);
      }
    });
    $("#user_entity_type_c").change(function(){
      if($("#user_entity_type_c").prop("checked") == true){
        $("#user_ssn").prop("disabled", true);
        $("#user_ein").prop("disabled", false);
      }else{
        $("#user_ssn").prop("disabled", false);
      }
    });
    $("#user_entity_type_l").change(function(){
      if($("#user_entity_type_l").prop("checked") == true){
        $("#user_ssn").prop("disabled", true);
        $("#user_ein").prop("disabled", false);
      }else{
        $("#user_ssn").prop("disabled", false);
      }
    });
    $("#user_entity_type_p").change(function(){
      if($("#user_entity_type_p").prop("checked") == true){
        $("#user_ssn").prop("disabled", true);
        $("#user_ein").prop("disabled", false);
      }else{
        $("#user_ssn").prop("disabled", false);
      }
    });
    $("#user_entity_type_o").change(function(){
      if($("#user_entity_type_o").prop("checked") == true){
        $("#user_ssn").prop("disabled", true);
        $("#user_ein").prop("disabled", false);
      }else{
        $("#user_ssn").prop("disabled", false);
      }
    });
 }); 

Answer 1

From your code it looks like you're changing one of "enabled" options only in one of the five cases. You can do that with a loop, using a class selector.

Also, it may be just me, but I don't think you should use value in an input box / radio button to store something different than the default value that you want that item to have. I suggest changing it to something like value_type.

So, what you can do is add another class to your input elements, select by that and do what you need, something like:

$(function() {
    $('input.entity-option').change(function() {
    if (this.value_type === "I") {
        $("#user_ssn").prop("disabled", false);
        $("#user_ein").prop("disabled", true);
      } else {
        $("#user_ssn").prop("disabled", true);
        $("#user_ein").prop("disabled", false);
      }
    });
  });

And in your HTML you need something like:

<span class="radio inline">
  <label for="user_entity_type_i">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="I" name="user[entity_type]" id="user_entity_type_i" />
    Individual / Sole Proprietor
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_c">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="C" name="user[entity_type]" id="user_entity_type_c" />
    Corporation
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_p">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="P" name="user[entity_type]" id="user_entity_type_p" />
      Partnership
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_l">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="L" name="user[entity_type]" id="user_entity_type_l" />
    Limited Liability Company
  </label>
 </span>

 <span class="radio inline">
   <label for="user_entity_type_o">
     <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="O" name="user[entity_type]" id="user_entity_type_o" />
       Other
   </label>
 </span>