Question

我正在开发一个ASP.net页面，该页面显示一个数据网格，每行都有一个复选框和一个下拉列表。要继续下一步，每行必须选中一个选项或选项，但不能同时选中。

如果选中该复选框，则我尝试禁用下拉列表，如果选择除“选择原因”之外的任何选项，则禁用该复选框。我正在尝试使用jquery 1.4来做客户端的一切（我知道它的旧版本，但这是UI主导决策）。

我的代码在Chrome和IE8中运行良好，但是当我使用Firefox 16时，复选框在选择更改时不会禁用，直到用户点击网格外。然后该框禁用。我想摆脱额外的点击。

这是网格标记：

<asp:GridView ID="gvApps" runat="server" CssClass="sGrid"
            HorizontalAlign="Center" AutoGenerateColumns="False" 
            EmptyDataText="No Data" PageSize="3" 
            ShowHeaderWhenEmpty="True" >
    <Columns>
        <asp:TemplateField HeaderText="Select">
        <itemtemplate> 
            <asp:checkbox id = "gvCheckbox" runat="server"  onclick="RowCheckChanged(this)" />
            </itemtemplate>
        </asp:TemplateField>
        <asp:BoundField datafield="FiscalYear" HeaderText="Year"    />
        <asp:TemplateField HeaderText="Reason">
            <itemtemplate>
            <asp:DropDownList id = "ddlReason"  Viewstate="true" DataSource="<%# ReasonsList %>"  runat="server" />
            </itemtemplate>
        </asp:TemplateField>
    </Columns>
    <emptydatatemplate>
        <p class="norecords">There are currently no Records </p>
    </emptydatatemplate> 
</asp:GridView>

这是我的OnReady：

    <script type="text/javascript">
    $(function () {
        $("select").change(function () {
            $(IndexChanged(this));
        });
    })
</script>

以下是IndexChanged和RowCheckChanged函数：

<script type="text/javascript">
function RowCheckChanged(objRef) {
    var row = objRef.parentNode.parentNode;
    if (objRef.checked) {
        $(row).find("select").attr("selectedIndex", 0);
        $(row).find("select")[0].disabled = true;
    }
    else {
        $(row).find("select")[0].disabled = false;
    }
}


function IndexChanged(objRef) {
    //toggle  chkb enabled-ness
    var row = objRef.parentNode.parentNode;

    if ($(row).find("select option:selected").text() == "Select a Reason") {
        //both objects should be enabled
        $(row).find(":checkbox").attr("disabled", false);
     } else {
        //a selection has been made, disable checkbox.
        $(row).find(":checkbox").attr("disabled", true);
    }
}
</script>

任何想法？

编辑：这是网格客户端生成的标记（每个firebug）：

<select id="MainContent_wiz_IntraAppYears1_gvApps_ddlReason_0" viewstate="true" name="ctl00$MainContent$wiz$IntraAppYears1$gvApps$ctl02$ddlReason" disabled="">
    <option value="Select a Reason" selected="selected">Select a Reason</option>
    <option value="Tax Exempt">Tax Exempt</option>
    <option value="Out of Business">Out of Business</option>
    <option value="Worked under Another Authority">Worked under Another Authority</option>
    </select>

Answer 1

尝试使用

 $(row).find(":checkbox").attr("disabled", "disabled");

和

$(row).find(":checkbox").removeAttr("disabled");

语法与较新版本的jQuery中可用的prop()方法不完全相同，并且在旧版本的FF，IE 6-8等中为我工作

DEMO使用jQuery 1.4： http://jsbin.com/otuyez/1/edit

此外，不需要将$()包裹起来，因为它严格来说是一个函数调用

$(IndexChanged(this));

可以简单地将该函数作为select更改的处理程序调用：

 $(function () {
    $("select").change(IndexChanged);
})

其他一些可能有帮助的调整

$(row).find("select").attr("selectedIndex", 0);

可以写成

$(row).find("select").val('')

Answer 2

一位朋友向我指了FF和IE的.click事件，它看起来效果很好。在事件触发之前，我不再需要下拉列表来失去焦点。似乎chrome不喜欢.click，所以我必须有条件地链接事件。

这是我的新OnReady：

if ($.browser.webkit) {
        $("select").change(function () {
            $(IndexChanged(this));
        });
    } else {
        $("select").click(function () {
            $(IndexChanged(this));
        });
    }

感谢charlietfl的帮助和建议！

复选框将不会启用/禁用，直到控件失去焦点

2 个答案: