Question

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

我已经设法将一些东西放在一起，但我的知识是有限的，所以它很可能是这样做的最长方式，我希望有人知道一个更简单的方法，然后才开始在其中构建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);
   }
});

Answer 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

Answer 2

您可以使用开关说明：

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

基于其他单选按钮的单选按钮切换

2 个答案: