0

我正在处理一个 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>

有任何想法吗？

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

<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>
4

2 回答 2

1

尝试使用

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

和

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

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

使用 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('')
于 2012-10-28T22:32:28.383 回答
0

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

这是我的新 OnReady：

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

感谢 charlietfl 的帮助和建议！

于 2012-10-29T16:02:36.940 回答