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');
}
});
});
});
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"> 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"> 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"> 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"> 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"> 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"> 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.
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?
submit
" (which is your fieldset
). This excludes your yes/no buttons but includes the previously left out textarea
. is(':checked')
. else
branch was never called. textarea
as well. click
function outside the first. $('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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.