Iswar K Chettri Iswar K Chettri - 6 months ago 15
Javascript Question

how to enabled and disabled the button in a checked event of checkbox in jQuery

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

Your help will surely be appreciated.

thank You

With regard.

Answer

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

   });
});