0

各行にチェックボックスとドロップダウンリストが付いたデータグリッドを表示するASP.netページで作業しています。次の手順に進むには、各行でチェックまたはオプションを選択する必要がありますが、両方を選択することはできません。

チェックボックスがオンになっている場合はドロップダウンリストを無効にし、「理由の選択」以外のオプションが選択されている場合はチェックボックスを無効にしようとしています。私はjquery1.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 イベントを教えてくれましたが、うまく機能しているようです。イベントが発生する前にフォーカスを失うドロップダウン リストはもう必要ありません。クロムは .click を好まないようですので、条件付きでイベントをリンクする必要があります。

これが私の新しい OnReady です。

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

助けとアドバイスをくれたcharlietflに感謝します！

于 2012-10-29T16:02:36.940 に答える