Enable/disable button on modal pop up

Question

I am very new to client side programming and I am looking to solve the following issue. I have MVC cshtml page which has some information on it. On click on the Save button, there is a modal pop up that shows (attached a screen shot of it) with a check box, a text box with some text in it and save and a cancel button. Following is the html for this 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>

Now I would like to disable the Save button on load of this pop up, and the save button should get enabled only on checking the check box. I wrote the following Jquery for this

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

But it does not seem to work. The button is not disabled when the pop up is seen on the screen. But on check of the check box and unchecking it .. it starts behaving the way it should as in ...enable the save button on check of the check box and disable it on un-check of it. I later on realised that the class="btn btn-primary save" being used on the Save button has something to do with this. If I removed this class on the Save button, although it does not appear to be asthetically pleasing, it works the way it is supposed to i.e. be disabled when the modal pop up appears and enable and disable the save button on check and un-check of the check box.

The class="btn btn-primary save" has the following code for btn-primary

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

Is there anything in this CSS which is preventing the button from getting disabled on load ? I am not sure how to make this work keeping the class="btn btn-primary save" on the button.

Hoping for some help.

AJ

Answer 1

Is there anything stopping you from setting these to the default state initially in the MVC view? It makes more sense doing it there rather than in the with Javascript.

Add the disabled property to the button:

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

You'd then use the following handler on your checkbox (your should still work, but you are getting jQuery to search for the elements each time, so assigning button and using event.target are better (and more performant) options:

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

Here's a fiddle.