-1

コンテスト用にラジオ ボタンを使用して 4 つのフォームをセットアップする必要があります。選択によって他のオプションが無効になるようにセットアップしたいので、質問 1 で A を選択した場合、オプション 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);
   }
});
4

2 に答える 2

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

        })
    }
});

デモ：フィドル

于 2013-03-18T10:46:26.590 に答える
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;
        }
});

更新されたフィドルを参照してください。

于 2013-03-18T10:41:02.160 に答える