Disable radio buttons

Question

I am developing a form and I need to be able to activate a greyed out section when "yes" is selected and disable it when "no" is selected. It would also be great if the code can be condensed and made simpler.

$(document).ready(function() {
    $("input:radio[name^='event-type-']").prop( "disabled", true );
    $('#submit').css('color','#ccc');

    $("input:radio[class^='yes-']").click(function() {
        var n= "#"+$(this).parent().attr('id');
        if ($(this).is(':checked')){
            $(n+' input:radio').prop( "disabled", false );
            $('#submit').css('color','#000');
        }

        $("input:radio[class^='no-']").click(function() {
            var n= "#"+$(this).parent().attr('id');
            if ($(this).is(':checked')){
                $(n+' input:radio').prop( "disabled", true );
                $('#submit').css('color','#ccc');
            }else {
                $(n+' input:radio').prop( "disabled", true );
                $(n+' input:radio').prop( "checked", false );
                $('#submit').css('color','#ccc');
            }
        });

    });

}); 

https://jsfiddle.net/artboycat/pkt7ws69/2/

Answer 1

$('input[name="1"]').click(function() {
  var value = $(this).val();
  if (value === "2") {
    $('#submit input, textarea').prop('disabled', true);
    $('#submit').css('color', '#ccc');
  } else {
    $('#submit input, textarea').prop('disabled', false);
    $('#submit').css('color', '#000');
  }
});

When you click on No (with value 2), it disables all inputs and text areas and changes the font color to grey. When you click on yes (value 1), it enables it and makes the font black.

Answer 2

You almost had it, but you were disabling the yes/no buttons as well and your selectors did not match the textarea.

Now for an even simpler code see this updated fiddle:

$(document).ready(function() {
  $('#submit *').prop( "disabled", true );
  $('#submit *').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
    $('#submit *').prop( "disabled", false );
    $('#submit *').css('color','#000');
  });
  $("input:radio[class^='no-']").click(function() {
    $('#submit *').prop( "disabled", true );
    $('#submit input').prop( "checked", false );
    $('#submit textarea').prop( "value", "");
    $('#submit *').css('color','#ccc');
  });
});

What did I change?

• I changed the CSS selectors to match "everything below the element with the id submit" (which is your fieldset). This excludes your yes/no buttons but includes the previously left out textarea.
• When a radio button sends a click event, it is automatically checked, so you don't have to check for is(':checked').
• Similar, your last else branch was never called.
• I am now clearing the textarea as well.
• I moved your second click function outside the first.

Answer 3

Following your code, this may fix it:

$(document).ready(function() {
    $("input:radio[name^='event-type-']").prop( "disabled", true );
    $('#submit').css('color','#ccc');

  	$("input:radio[class^='yes-']").click(function() {
    	  var n= "#"+$(this).parent().attr('id');
      	if ($(this).is(':checked')){
        	   $(n+' input:radio').prop( "disabled", false );
          	 $('#submit').css('color','#000');
     		}
    });
    
  	$("input:radio[class^='no-']").click(function() {
      	var n= "#"+$(this).parent().attr('id');
      $(n+' input:radio').prop( "disabled", true );
      $(n+' input:radio').prop( "checked", false );
      $('#submit').css('color','#ccc');
      $("input:radio[class^='yes-']").prop( "disabled", false );
      $("input:radio[class^='no-']").prop( "disabled", false );
      $("input:radio[class^='no-']").prop( "checked", true );
    });

  
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grps" id="grps1">
 
 <input type="radio" name="1" class="yes-1" value=1>yes 
 <input type="radio" name="1" class="no-1" value=2>no

<fieldset id="submit">
<legend>Event Type*</legend>
<ul>
<li>Please check event type that best describes your event</li>
<li>This form must be submitted two weeks prior to event date</li>
</ul>


<input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
 <br>
<input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
<br>
<input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
 <br>
<input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
 <br>
<input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
<br>




<input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
<div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

</fieldset>
</div>
 
 <BR clear="all">
<br>

That's not the best way to do it but should works for you.