javascript - 在 ASP.NET MVC3 中使用 jQuery 禁用控件

Question

我有下表，其中包含一些行，我想禁用每行内的所有控件。

下面是我的 HTML 代码:

<table id="tblChildData">
    <tr id="trChild2">
        <td>
            2
        </td>
        <td style="height: 30px;">
            <%:Html.TextBoxFor(m=>m.childName2) %><%--<br />
                <%: Html.ValidationMessageFor(m=>m.SpouseName,null,new{@Class="field-validation-message"}) %>--%>
        </td>
        <td style="height: 30px; text-align: center;">
            &nbsp;M<%: Html.RadioButtonFor(m=>m.genderIdChild2,1) %>
            &nbsp;F<%:Html.RadioButtonFor(m=>m.genderIdChild2,2) %>
        </td>
        <td style="height: 30px; text-align: center;">
            <%:Html.TextBoxFor(m=>m.ageChild2,new{Style="width:30px;",maxlength=3}) %><%--<br />
                <%:Html.ValidationMessageFor(m=>m.SpouseAge,null,new{@Class="field-validation-message"}) %>--%>
        </td>
        <td style="height: 30px; text-align: center;">
            &nbsp;&nbsp;&nbsp;Married<%: Html.RadioButtonFor(m=>m.maritialStatusChild2,1) %>
            UnMarried<%:Html.RadioButtonFor(m=>m.maritialStatusChild2,2) %>
        </td>
    </tr>
</table>

下面是我用来禁用每个表行内的控件的 jQuery 代码:

$("#trChild2").find("input,button,textarea").attr("disabled", true);
$("#trChild2").hide();
$("#trChild3").find("input,button,textarea").attr("disabled", true);
$("#trChild3").hide();
$("#trChild4").find("input,button,textarea").attr("disabled", true);
$("#trChild4").hide();
$("#trChild5").find("input,button,textarea").attr("disabled", true);
$("#trChild5").hide();
$("#trChild6").find("input,button,textarea").attr("disabled", true);
$("#trChild6").hide();
$("#trChild7").find("input,button,textarea").attr("disabled", true);
$("#trChild7").hide();
$("#trChild8").find("input,button,textarea").attr("disabled", true);
$("#trChild8").hide();
$("#trChild9").find("input,button,textarea").attr("disabled", true);
$("#trChild9").hide();
$("#trChild10").find("input,button,textarea").attr("disabled", true);
$("#trChild10").hide();
$("#trChild11").find("input,button,textarea").attr("disabled", true);
$("#trChild11").hide();
$("#trChild12").find("input,button,textarea").attr("disabled", true);
$("#trChild12").hide();

但我不知道为什么它只隐藏表格行而不禁用行内的控件...

我也在 jsfiddle 上试过这个，但它似乎工作正常:http://jsfiddle.net/3QuT4/1/

请帮帮我..

谢谢，

阿曼

Answer 1

您不需要为每个 <tr> 分配唯一的 ID表的行。您可以使用以下选择器来禁用表格内的所有输入字段:

$('table :input').prop('disabled', true);

注意使用 .prop() 是用于禁用字段而不是 .attr() 的推荐函数如果您使用的是 jQuery 1.6 或更高版本。

如果您只想禁用某些行，则将这些行应用到同一类，然后:

$('table tr.someClassName :input').prop('disabled', true);

使用 id 并为每个 id 重复相同的 jQuery 选择器似乎是解决问题的一种非常幼稚的方法。