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>

但它似乎不起作用。当在屏幕上看到弹出窗口时，不会禁用该按钮。但是在检查复选框并取消选中它时，它开始按照它应该的方式运行...在检查复选框时启用保存按钮并在取消选中时禁用它。我后来意识到这个类=＆＃34; btn btn-primary save＆＃34;在“保存”按钮上使用与此有关。如果我在“保存”按钮上删除了这个类，虽然它看起来并不令人满意，但是当它出现模式弹出时它会被禁用，并且在检查和取消检查时启用和禁用保存按钮的复选框。

班级=＆＃34; btn btn-primary save＆＃34;有以下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; }

此CSS中是否有任何内容阻止按钮在加载时被禁用？我不确定如何使这项工作保持班级=＆＃34; btn btn-primary save＆＃34;在按钮上。

希望得到一些帮助。

AJ

Answer 1

是否有什么阻止您在MVC视图中将这些设置为默认状态？在那里做而不是用Javascript更有意义。

将禁用的属性添加到按钮：

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

弹出模式时启用/禁用按钮

1 个答案: