如何啓用和禁用jQuery複選框的選中事件中的按鈕

Question

我在網格中有一個複選框。我的代碼示例如下：

<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。我怎樣才能達到這個要求。

您的幫助肯定會被讚賞。

謝謝你

關於。

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

    }); 
}); 

Answer 2

綁定你的複選框的change事件，而不是click，並設置殘疾人屬性，而不是屬性。你不應該在選擇器中需要這個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); 
    } 
    }); 
}); 

Answer 3

你可以這樣做：

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