Question

我在这个表格中有单选按钮

<form>
    <table class="table table-hover flights_table">
        <tr>
            <td>
                <input type="radio" class="flight" name="flight" />
            </td>
            <td>Fare type</td>
            <td>Price</td>
            <td>dep</td>
            <td>Arrival</td>
        </tr>
        <tr>
            <td>
                <input type="radio" class="flight" name="flight" />
            </td>
            <td>Fare type</td>
            <td>Price</td>
            <td>dep</td>
            <td>Arrival</td>
        </tr>
        <tr>
            <td>
                <input type="radio" class="flight" name="flight" />
            </td>
            <td>Fare type</td>
            <td>Price</td>
            <td>dep</td>
            <td>Arrival</td>
        </tr>
    </table>
</form>

和jQuery代码

$('.flights_table tr').click(function (e) {
    //$('.flight').attr('checked', false);
    $(this).find('.flight').attr('checked', true);
});

目的是在单击行所在的行时选择一个无线电，并且每个无线电只能使用一次。

例如，您选择1st然后单击2nd，如果您尝试再次选择1st，则它不起作用。

我使用的解决方案在this question中被接受为工作但不再完美。

我尝试使用removeAttr代替注释行同样的结果。

http://jsfiddle.net/NsDnh/

Answer 1

试试这个

 $('tr').click(function (e) {
 $(this).$(input:radio).prop('checked', true);
});

Answer 2

问题是attr()与jQuery版本1.9+的不兼容问题。

从jQuery 1.6开始，.attr（）方法为属性返回undefined 尚未设定。检索和更改DOM属性，例如选中，选中或禁用表单元素的状态，使用 .prop（）方法。

请尝试使用prop：

 $('.flights_table tr').click(function (e) {
     //$('.flight').attr('checked', false);
     $(this).find('.flight').prop('checked', true);
 });

的 Updated Demo

Answer 3

尝试以下代码。

   $(this).find('.flight').prop('checked', true);

<强> jsFiddle

单击父级时选择无线电

3 个答案: