如何根据单选按钮选择在表中切换多个输入

how to toggle multiple inputs within a table depending on radio button selection

本文关键字：输入 何根 单选按钮 选择      更新时间：2023-09-26

假设以下html： 

<tr>
    <td>
        <label for="c1_testRdio">Have you taken any tests in this class?:</label>
        <br>
        <label>Yes<input type="radio" class="testRdio" name="c1_testRdio" value="Yes"></label>
        <label>No <input type="radio" class="testRdio" name="c1_testRdio" value="No" checked></label>
        <label>How Many? <input type="text" class="howManyTests" name="c1_howManyTests" disabled></label>
    </td>
    <td>
        <label for="c1_whatGradesTests">What were your grades?:</label><br>
        <input type="text" name="c1_whatGradesTests" disabled>
    </td>
</tr>

如果选择了带有value="Yes"的无线电，那么什么jQuery（兼容1.5）代码将启用2个文本输入，c1_howManyTests和c1_whatGradesTests？

试过：

$('.testRdio').change(function(){
    //var txt = $(this).closest("td").next("td").children('.howManyTests');
    var txt = $(this).parent().next('label>input[type="text"]');
    console.log(txt.id);
    this.value == 'No' ? txt.removeAttr('disabled') : txt.attr('disabled', 'disabled');
});

试试这个：

$('.testRdio').change(function () {
    $(this).closest('tr').find('input[type="text"]').attr('disabled', this.value === 'No');
});

没有 prop、attr（也用于执行 prop 工作）的旧 jq 版本用于为禁用获取布尔值。

演示

此外，我还必须修复您的标记（现在我已经在问题中看到它已修复）

$('.testRdio').change(function(){
   $(this).closest('tr').find('input[type="text"]').attr('disabled',$(this).val()=="No");
});

js小提琴示例

你的代码有点乱，所以我重建了它：http://jsfiddle.net/QgJac/1/

我认为隐藏整个div更好。如果他们选择"否"，他们实际上不需要看到这些问题。

相关文章：