-1

我需要为比赛设置 4 个带有单选按钮的表单，我想将其设置为禁用其他选项，因此如果您为问题 1 选择了 A，则选项 A 在 2,3 和 4 中被禁用。

我已经设法将一些东西放在一起，但我的知识有限，所以它很可能是最长的方法，我希望在我开始将两个额外的表单构建到其中之前，有人知道一个更简单的方法。

我设置了一个小提琴，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

您可以使用switch指令：

$('.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 回答