如何在jQuery中的复选框选中事件中启用和禁用按钮?
我在网格中有一个多重复选框。我的代码示例如下:如何在jQuery中的复选框选中事件中启用和禁用按钮?,jquery,Jquery,我在网格中有一个多重复选框。我的代码示例如下: <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: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,但在我的情况下,此按钮未启用。
当用户单击CancelAllChagesButton时,SaveAllChangesButton和CancelAllChagesButton应该被禁用。我怎样才能做到这一点呢?试试这个
$(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');
});
});
将复选框绑定到
change
事件,而不是单击
,并设置disabled属性,而不是属性。您不需要在选择器中输入[id$=“”]部分。你可以这样做。简单得多。下面是一个JSFIDLE,它演示了这一点:
您可以这样做:
$(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");
}
它应该是
prop('disabled',true/false)代码>在复选框的选中事件中未启用按钮。同样的结果是相同的。只执行document.ready部分。它不会触发$('[id$=FeatureStatusCheckBox]')。单击(函数()
$(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);
}
});
});
$(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");
}