Aktivieren/Deaktivieren der Schaltfläche auf Modal Pop-up

Question

Ich bin sehr neu auf der Client-Seite Programmierung und ich bin auf der Suche nach dem folgenden Problem zu lösen. Ich habe MVC cshtml Seite, die einige Informationen darüber hat. Beim Klicken auf die Schaltfläche Speichern erscheint ein Modal-Popup, das (mit einem Screenshot davon) ein Kontrollkästchen, ein Textfeld mit Text und Speichern sowie eine Schaltfläche zum Abbrechen anzeigt. Im Folgenden ist der HTML-Code für dieses Modal Pop-up.

<div id="save-as-modal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header modal-header-blue"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span id="close" aria-hidden="true" class="fa fa-times"></span> 
        </button> 
        <h4 class="modal-title">Save As...</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="messages"></div> 
        <div class="form-horizontal"> 
         <div class="form-group">        
           <input class="@Model.CheckBoxContainerDivCssClass" type="checkbox" id="chkBox">Are u sure ?<br>        
           <label class="@Model.FormLabelRequiredCssClass">Name</label> 
           <div class="@Model.FormFieldEditorDivCssClass"> 
            <input class="@Model.InputTextCssClass" type="text" name="name" value="" /> 
           </div> 
          </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary save" id="btnSave">Save</button> 
        <button class="btn btn-default cancel">Cancel</button> 
       </div> 
      </div> 
     </div> 
</div> 

Nun möchte Ich mag die Schaltfläche Speichern auf Last dieses Pop-up deaktivieren, und die Taste nur auf die Überprüfung der Kontrollkästchen aktiviert bekommen speichern sollte. Ich schrieb die folgende Jquery für diese

<script> 
     $(document).ready(function() {   
      $('#btnSave').prop('disabled', !$('#chkBox').prop("checked")); 
      $('#chkBox').on('change', function() { 
       $('#btnSave').prop('disabled', !$('#chkBox').prop("checked")); 
      }) 
     }); 
</script> 

Aber es scheint nicht zu funktionieren. Die Schaltfläche ist nicht deaktiviert, wenn das Popup auf dem Bildschirm angezeigt wird. Aber wenn Sie das Kontrollkästchen aktivieren und es deaktivieren, beginnt es sich so zu verhalten, wie es sein soll. Aktivieren Sie die Schaltfläche Speichern, wenn Sie das Kontrollkästchen aktivieren, und deaktivieren Sie es, wenn Sie es nicht mehr überprüfen. Später erkannte ich, dass die Klasse = "btn btn-primary save", die auf der Schaltfläche Speichern verwendet wird, etwas damit zu tun hat. Wenn ich diese Klasse auf der Schaltfläche "Speichern" entfernt habe, obwohl sie scheinbar nicht ästhetisch ansprechend ist, funktioniert sie so, als ob sie deaktiviert wäre, wenn das modale Popup erscheint und die Schaltfläche "Speichern" beim Prüfen und Abwählen aktiviert und deaktiviert wird des Kontrollkästchens.

Die class = „btn btn-Primär speichern“ hat den folgenden Code für BTN-Primär

.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); 
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); 
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); } 

.btn-primary { background-image: -webkit-linear-gradient(top, 
#428bca 0%, #2d6ca2 100%); background-image:   linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background-repeat: repeat-x; border-color: #2b669a; } 

Gibt es etwas in dieser CSS, das die Schaltfläche verhindert auf Last deaktiviert zu werden? Ich bin nicht sicher, wie man diese Arbeit macht, indem man die Klasse = "btn btn-primary save" auf dem Knopf hält.

In der Hoffnung auf etwas Hilfe.

AJ

Answer 1

Gibt es alles, was man von der Einstellung dieser in den Grundzustand zunächst in der MVC-Ansicht zu stoppen? Es macht mehr Sinn dort zu tun als in Javascript.

die deaktivierte Eigenschaft auf die Schaltfläche Hinzufügen:

<button type="button" class="btn btn-primary save" id="btnSave" disabled>Save</button> 

Sie dann die folgende Prozedur auf Ihrem Checkbox verwenden würde (Ihr noch funktionieren sollte, aber Sie werden immer jQuery für die Elemente jedes Mal suchen, so button zuweisen und event.target verwenden, sind besser (und mehr performant) Optionen:

var button = $('#button'); 
$('#chkBox').change(function(event) { 
    button.prop('disabled', !$(event.target).is(':checked')); 
}); 

Here's a fiddle.