How to enable and disable the button in a checked event of checkbox in jQuery?

Question

I have a multiple check box in a grid. my code sample is as follows:

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

i just want to disable the SaveAllChangesButton and CancelAllChagesButton if there is no changes. i want to enabled the SaveAllChangesButton and CancelAllChagesButton when there is changes in the checkbox. to do so I have a jquery code like this:

  $(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');

      });
  });

When there is no changes it is working fine, but when there is changes in some of the checkbox then the SaveAllChangesButton and CancelAllChagesButton should be enabled but here in my condition this buttons are not enabled. And when User clicks on CancelAllChagesButton then the SaveAllChangesButton and CancelAllChagesButton should be disable. How can I achieve this?

Amit · Accepted Answer · 2013-08-23 11:44:53Z

1

Try this

$(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');

   });
});

answered Aug 23, 2013 at 11:44

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arun P Johny Over a year ago

it should be prop('disabled', true/false);

Iswar Over a year ago

The buttons are not enabled in the checked event of checkbox. again the same result.

Iswar Over a year ago

only the document.ready section is executed. It doesnot fire the $('[id$=FeatureStatusCheckBox]').click(function ()

Brett · Accepted Answer · 2013-08-23 13:14:47Z

1

Bind your checkbox to the change event instead of click, and set the disabled property, not the attribute. You shouldn't need this input[id$=""] part in the selectors. You could instead do it like this. Much simpler. Here's a jsFiddle that demonstrates this: 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);
    }
  });
});

edited Aug 23, 2013 at 13:14

answered Aug 23, 2013 at 12:55

Brett

4,2591 gold badge15 silver badges28 bronze badges

Comments

Arunesh · Accepted Answer · 2013-08-29 07:03:25Z

1

You Can Do Like This:

 $(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");
}

answered Aug 29, 2013 at 7:03

Arunesh

2976 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to enable and disable the button in a checked event of checkbox in jQuery?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related