我是客户端编程的新手,我希望解决以下问题。我有 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"与此有关。如果我在“保存”按钮上删除了此类,尽管它看起来并不美观,但它会按照预期的方式工作,即当模式弹出窗口出现时被禁用,并在选中和取消选中时启用和禁用保存按钮的复选框。
class="btn btn-primary save"有如下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 中是否有任何内容可防止按钮在加载时被禁用?我不确定如何在按钮上保留 class="btn btn-primary save"来完成这项工作。
希望得到一些帮助。
阿杰
最佳答案
在 MVC View 中是否有什么阻止您将这些设置为初始状态的默认状态?在那里做比在 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'));
});
关于javascript - 启用/禁用模态弹出按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38065585/