jquery - Radio Button toggle based on other radio button -
i needing setup 4 forms radio buttons competition, wanting set selections disable other options, if selected question 1 option disabled in 2,3 , 4.
i have managed put together, knowledge limited longest possible way of doing , hoping know of simpler method before start building 2 forms it.
i setup fiddle, http://jsfiddle.net/2kc6m/2/
html:
<form id="answer1" class="radiooptions"> <div class="forminput"><input type="radio" value="a1" name="question1" /> a</div> <div class="forminput"><input type="radio" value="b1" name="question1" /> b</div> <div class="forminput"><input type="radio" value="c1" name="question1" /> c</div> <div class="forminput"><input type="radio" value="d1" name="question1" /> d</div> </form> <form id="answer2" class="radiooptions"> <div class="forminput"><input type="radio" value="a2" name="question2" /> a</div> <div class="forminput"><input type="radio" value="b2" name="question3" /> b</div> <div class="forminput"><input type="radio" value="c2" name="question3" /> c</div> <div class="forminput"><input type="radio" value="d2" name="question2" /> d</div> </form> script:
$('.answeroptions').click(function(){ if(this.value == 'a1' && this.checked){ $('input[value=a2]').prop('disabled', true); $('input[value=b2], input[value=c2], input[value=d2]').prop('disabled', false); } else if(this.value == 'b1' && this.checked){ $('input[value=a2], input[value=c2], input[value=d2]').prop('disabled', false); $('input[value=b2]').prop('disabled', true); } else if(this.value == 'c1' && this.checked){ $('input[value=c2]').prop('disabled', true); $('input[value=a2], input[value=b2], input[value=d2]').prop('disabled', false); } else if(this.value == 'd1' && this.checked){ $('input[value=a2], input[value=b2], input[value=c2]').prop('disabled', false); $('input[value=d2]').prop('disabled', true); } else{ $('.answeroptions').not(this).prop('checked', false).prop('disabled', false); } });
what about
var radios = $('input[type="radio"]').addclass('answeroptions'); var forms = $('.radiooptions'); $('.answeroptions').click(function(){ var $this = $(this); if(this.checked){ var checked = $('.answeroptions:checked', forms); radios.prop('disabled', false); checked.each(function(i, v){ var $item = $(v); var $form = $item.closest('form'); var prefix = this.value.substring(0, 1) forms.not($form).each(function(i,v){ var $form = $(v); var x = $form.find('input:radio[value^=' + prefix + ']').prop('disabled', true); }); }) } }); demo: fiddle
Comments
Post a Comment