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);
 }
 });
 }); 

• Phrancis: I made an edit to the title and tags to better reflect the purpose of the code. Hope you get good answers!

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>

• Tushar: Suggestions: Use data-attr for custom attributes and use $(selector).data('attr') to get it's value. prop accepts boolean value so you can avoid using if ... else and use $('input.entity-option').change(function() { var isValueI = $(this).data('valuetype'); $("#user_ssn").prop("disabled", !isValueI); $("#user_ein").prop("disabled", isValueI); });
• Tushar: It should be var isValueI = $(this).data('valuetype') === 'I'; in my ^^^ comment.