モーダルポップアップでボタンを有効/無効にする

Question

私はクライアント側のプログラミングにはとても新しいので、以下の問題を解決するために探しています。私はいくつかの情報を持っているMVCのcshtmlページを持っています。保存ボタンをクリックすると、チェックボックス、テキストが入ったテキストボックス、保存、キャンセルボタンが表示されたモーダルポップアップが表示されます（スクリーンショットが添付されています）。以下は、このモーダルポップアップのhtmlです。

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

ここで、このポップアップの読み込み時に[保存]ボタンを無効にし、チェックボックスをオンにすると保存ボタンが有効になります。私はこのために次のJqueryを書いた

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

しかし、それは動作していないようです。ポップアップが画面に表示されても、ボタンは無効になりません。しかし、チェックボックスをチェックしてチェックを外すと、チェックボックスのチェックをオンにして保存ボタンを有効にし、チェックボックスをオフにすると無効にする方法で動作します。私は後で、class = "btn btn-primary save"がSaveボタンで使用されていることを、これと関係があると認識しました。 Saveボタンでこのクラスを削除した場合、それは芸術的には気に入らないようですが、モーダルポップアップが表示されたときに無効にされているように動作し、チェックとアンチェックで保存ボタンを有効または無効にしますチェックボックスの=「BTN-主要BTN保存」

クラスは、BTN-主

.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; } 

次のコードを持っている負荷で無効になってからボタンを妨げているこのCSSではありますか？私はこの作業をクラス= "btn btn-primary save"をボタンの上に保つ方法を理解していません。

助けを借りて願っています。

AJ

Answer 1

はMVCビューで、最初はデフォルトの状態にこれらの設定からあなたを止めるものはありますか？ Javascriptを使うよりも、そこでやっているほうが意味があります。

ボタンにdisabledプロパティを追加します。

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

あなたはその後、（そう、あなたはまだ動作するはずですが、あなたはjQueryの要素のためのたびに検索するようになっているあなたのチェックボックスに次のハンドラを使用したいですbuttonを割り当て、event.targetを使用して、より良い（よりパフォーマンス）オプションは次のとおり

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

Here's a fiddle.