Question

假设以下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');
});

Answer 1

试试这个：

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

旧的jq版本没有prop，attr（以前也用于做prop的工作）过去常常将bool值用于禁用。

<强> Demo

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

Answer 2

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

<强> jsFiddle example

Answer 3

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

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

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

3 个答案: