1

我在网格中有一个多个复选框。我的代码示例如下：

<asp:Panel ID="FeatureGridViewPanel" runat="server" Visible="true" Width="100%">
    <div class="topline"></div>
    <div class="linebreak"></div>
    <div style="float:left; width:90%;">
        <asp:GridView ID="FeatureListGridView" runat="server" AutoGenerateColumns="False"
        CellPadding="4" ForeColor="#666666" GridLines="None" Width="100%">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="FeatureNameHeaderLabel" runat="server" Text="Feature Name "
                        CssClass="GridViewTH"></asp:Label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <div style="display: none;">
                            <asp:Label ID="FeatureIDLabel" runat="server" Text='<%#Eval("FeatureID")%>'>' ></asp:Label>
                        </div>
                        <asp:Label ID="FeatureNameLabel" runat="server" CssClass="GridViewLabel"
                        Text='<%#Eval("FeatureName")%>'>' ></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="FeatureStatusHeaderLabel" runat="server" Text="Feature Status"
                        Class="GridViewTH"></asp:Label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="FeatureStatusCheckBox" runat="server" Checked='<%#Eval("isEnabled") %>'
                        />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EditRowStyle />
        </asp:GridView>
    </div>
    <div class="topline"></div>
    <div class="linebreak"></div>
    <div style="margin:4px; float:right;">
        <asp:Button ID="CancelAllChagesButton" runat="server" Text="Cancel All Changes"
        OnClick="CancelAllChagesButton_Click" CssClass="CCButtonEnabled" />
        <asp:Button ID="SaveAllChangesButton" runat="server" Text="Save All Changes"
        OnClick="SaveAllChangesButton_Click" CssClass="CCButtonEnabled" />
        <asp:Button ID="ChangePlanButton" runat="server" Text="Change Plan" OnClick="ChangePlanButton_Click"
        CssClass="CCButtonEnabled" />
        <asp:Button ID="UpgradeFeatureButton" runat="server" Text="Update Feature"
        OnClick="UpgradeFeatureButton_Click" CssClass="CCButtonEnabled" />
    </div>
</asp:Panel>

如果没有更改，我只想禁用 SaveAllChangesButton 和 CancelAllChagesButton。当复选框发生更改时，我想启用 SaveAllChangesButton 和 CancelAllChagesButton。为此，我有一个这样的 jquery 代码：

  $(document).ready(function () {
      $('[id$=SaveAllChangesButton]').attr('disabled', 'disabled');
      $('[id$=CancelAllChagesButton]').attr('disabled', 'disabled');
      $(".disabled").click(function () {
          return false;
      });
      $('[id$=FeatureStatusCheckBox]').click(function () {

          $('[id$=CancelAllChagesButton]').removeAttr('disabled', 'disabled');
          $('[id$=SaveAllChangesButton]').removeAttr('disabled', 'disabled');

      });
  });

当没有更改时，它工作正常，但是当某些复选框发生更改时，应启用 SaveAllChangesButton 和 CancelAllChagesButton，但在我的情况下，此按钮未启用。当用户单击 CancelAllChagesButton 时，应禁用 SaveAllChangesButton 和 CancelAllChagesButton。我怎样才能做到这一点？

4

3 回答 3

1

试试这个

$(document).ready(function () {
   $('input[id$="SaveAllChangesButton"]').prop('disabled', true);
   $('input[id$="CancelAllChagesButton"]').prop('disabled', true);

   $(".disabled").click(function () { return false; });
   $('input[id$="FeatureStatusCheckBox"]').click(function () {

         $('input[id$="CancelAllChagesButton"]').removeAttr('disabled');
         $('input[id$="SaveAllChangesButton"]').removeAttr('disabled');

   });
});
于 2013-08-23T11:44:53.847 回答
1

将您的复选框绑定到change事件而不是click，并设置 disabled 属性，而不是属性。您不应该input[id$=""]在选择器中需要这部分。你可以这样做。简单得多。这是一个演示这一点的 jsFiddle：http: //jsfiddle.net/xXfUp/

$(document).ready(function () {
  var check = $('#FeatureStatusCheckBox'),
      save = $('#SaveAllChangesButton'),
      cancel = $('#CancelAllChagesButton');

  save.prop('disabled', true);
  cancel.prop('disabled', true);

  check.change(function () {
    if ($(this).prop('checked')) {
      save.prop('disabled', false);
      cancel.prop('disabled', false);
    } else {
      save.prop('disabled', true);
      cancel.prop('disabled', true);
    }
  });
});
于 2013-08-23T12:55:42.420 回答
1

你可以这样做：

 $(document).ready(function () {
 var check = $('[id$=FeatureStatusCheckBox]'),
  save = $('[id$=SaveAllChangesButton]'),
  cancel = $('[id$=CancelAllChagesButton]');

  save.prop('disabled', "Disabled");
  cancel.prop('disabled', "Disabled");

  check.change(function () {
  if ($(this).prop('checked')) {
  save.prop('disabled', "Disabled");
  cancel.prop('disabled', "Disabled");
  } 
  else {
  save.prop('disabled', "Disabled");
  cancel.prop('disabled', "Disabled");
}
于 2013-08-29T07:03:25.547 回答