2013-03-18 5 views
-1

Мне нужно настроить 4 формы с переключателями для соревнований, я хочу настроить, чтобы выбор отключил другие параметры, поэтому, если вы выбрали A для вопроса 1, тогда опция A отключен в 2,3 и 4.Переключатель радио кнопки на основе другой радиокнопки

Мне удалось собрать что-то вместе, но мои знания ограничены, поэтому, скорее всего, это самый продолжительный способ сделать это, и я надеюсь, что кто-то знает более простой метод, прежде чем я начну строить в него добавляются 2 дополнительных формы.

я настроить скрипку, 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> 

Сценарий:

$('.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); 
    } 
}); 

ответ

1

насчет

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

     }) 
    } 
}); 

Демо: Fiddle

+0

спасибо, что почти идеально. – RemeJuan

+0

@RemeJuan есть проблемы с решением –

+0

маленький, он работает только с 2 наборами за раз, работая с ним в обновленной скрипке. http://jsfiddle.net/2Kc6m/7/ – RemeJuan

0

Вы можете использовать переключатель инструкции:

$('.answerOptions').click(function() { 
    if (this.checked) 
     switch (this.value) { 
      case 'A1': 
       $('input[value=A2]').prop('disabled', true); 
       $('input[value=B2], input[value=C2], input[value=D2]').prop('disabled', false); 
       break; 

      case 'B1': 
       $('input[value=A2], input[value=C2], input[value=D2]').prop('disabled', false); 
       $('input[value=B2]').prop('disabled', true); 
       break; 
      case 'C1': 
       $('input[value=C2]').prop('disabled', true); 
       $('input[value=A2], input[value=B2], input[value=D2]').prop('disabled', false); 
       break; 
      case 'D1': 
       $('input[value=A2], input[value=B2], input[value=C2]').prop('disabled', false); 
       $('input[value=D2]').prop('disabled', true); 
       break; 
      default: 
       $('.answerOptions').not(this).prop('checked', false).prop('disabled', false); 
       break; 
     } 
}); 

См. updated fiddle.