当选择特定的单选框时，使用jquery禁用循环中的文本框

Disable text boxes in a loop using jquery when a particular radio box is selected

本文关键字：循环 文本 jquery 选择 单选框 使用      更新时间：2024-03-07

在下面的表单中，我希望只有在选中单选按钮时才启用文本框。我有大约50个这样的问题。对于每个问题，只选择"是"，应启用文本框。否则不会。

我不想每次都用单选按钮的名字来手动禁用。但我想在一个循环中完成，因为所有的名字都有名字-ansr+qno。但我做不到。请帮帮我。任何其他建议也表示感谢。

<form id="sform" name="sform" method="post" action="processsurvey.php">
  <div class="qpanel">
    <div class="que"> <?php echo ++$qid ?> Content for  class "que" Goes Here </div>
    <div class="answers"> <input name="answersr2" type="radio" value="no" /> No </div>
    <div class="answers"> <input name="answersr2" type="radio" value="no" /> Yes 
    <input name="answersr2" type="text" placeholder="If any, give your answer here" /></div>
  </div>
  <div class="qpanel">
    <div class="que"> <?php echo ++$qid ?> Content for  class "que" Goes Here </div>
    <div class="answers"> <input name="answersr3" type="radio" value="no" /> No </div>
    <div class="answers"> <input name="answersr3" type="radio" value="no" /> Yes 
    <input name="answersr3" type="text" placeholder="If any, give your answer here" /></div>
  </div>

  <div class="finishpanel" align="center" >
  <input class="btn" type="submit" name="submit" id="submit" value="Submit" />
  </div>
</form>

此任务不需要循环：

$('.qpanel :radio').change(function () {
    // closest : up to .qpanel
    // find : down to the textbox
    var textbox = $(this).closest('.qpanel').find(':text');
    switch ($(this).val()) {
        case 'no': textbox.prop('disabled', true); break;
        case 'yes': textbox.prop('disabled', false); break;
    }
});

请注意，两个值当前都设置为"否"：

value="no" /> No
value="no" /> Yes

下面是一个演示：http://jsfiddle.net/wared/TLgsb/.

在每一组上，您的单选按钮都有value="no"？你应该改变它！

您可以使用prop('disabled')禁用/启用输入，传递true将禁用输入，false将重新启用输入。然后将其设置为无线电change()事件。

这应该做到：

$('.qpanel').each(function(){
    var $qpanel = $(this);
    $qpanel.find('[type="radio"]').change(function(){         
        if($(this).val() == 'yes'){
            $qpanel.find('[type="text"]').prop('disabled', false);
        }else{
            $qpanel.find('[type="text"]').prop('disabled', true);
        }
    });
});

请参阅此jsfiddle

相关文章：