不显示检查JQuery模式对话框的Google MDL复选框
不显示检查JQuery模式对话框的Google MDL复选框
提问于 2020-08-03 21:40:30
我正在使用JQuery在一个MDL页面上提供一个模式对话框。该对话框包括两个复选框。当我将对话框设置为模式时，复选框停止工作，当对话框不是模式时，复选框起作用。
页面的头部如下；
<head>
<title>Service Routing</title>
<meta charset="utf-8" />
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.lime-orange.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="Styles/toastr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="Scripts/getmdl-select.min.js" type="text/javascript"></script>
<script src="Scripts/toastr.js" type="text/javascript"></script>
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.ui-dialog-titlebar {
display: none
}
.ui-widget-content {
border: none;
}
.ui-dialog .ui-dialog-content {
padding: 0;
}
</style>
</head>该对话框定义如下；
<div id="editDialog">
<div>
<div class="mdl-card__title" >
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-grid">
<!--Service ID -->
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtServiceId" readonly>
<label class="mdl-textfield__label" for="serviceId">Service Id</label>
</div>
</div>
<!--Speciality-->
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtSpecialityCode" readonly>
<label class="mdl-textfield__label" for="specialityCode">Speciality Id.</label>
</div>
</div>
</div>
<div class="mdl-grid">
<!--Consultant-->
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtConsultant">
<label class="mdl-textfield__label" for="serviceName">Consultant</label>
<span class="mdl-textfield__error">Unknown Consultant Code</span>
</div>
</div>
<!--GP Code-->
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtGPCode" />
<label class="mdl-textfield__label" for="serviceName">GP Code</label>
</div>
</div>
<!--GP Code-->
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtRouting" >
<label class="mdl-textfield__label" for="serviceName">Routing</label>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtDocumentName" >
<label class="mdl-textfield__label" for="serviceName">Cerner Document Name</label>
</div>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txtEmailAlert" >
<label class="mdl-textfield__label" for="serviceName">Email Alert</label>
</div>
</div>
</div>
<div class="mdl-grid">
<!--Service ID -->
<div class="mdl-cell mdl-cell--2-col">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="chkProcess" id="lblProcess">
<input type="checkbox" id="chkProcess" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Process</span>
</label>
</div>
<div class="mdl-cell mdl-cell--4-col">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="chkShowConsultant" id="lblShowConsultant">
<input type="checkbox" id="chkShowConsultant" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Show Consultant</span>
</label>
</div>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="saveChanges">
Save
</a>
</div>
</div>该对话框使用以下代码进行初始化。
$("#editDialog").dialog({
autoOpen: false,
modal: true,
width: 1100,
height: 560,
resizable: false,
open: function () { $(".ui-dialog").css("box-shadow", "#CCC 15px 15px 15px"); }
});就是这段代码，如果我设置code :false，那么复选框起作用，但是如果它设置为true，那么它们就不起作用。
最后但并非最不重要的是，通过运行以下代码行显示该对话框
$("#editDialog").dialog("open");有人知道我能做些什么来让这些复选框工作吗？
回答 1
Stack Overflow用户
发布于 2020-08-03 23:50:07
通过将以下代码添加到页面，复选框现在可以工作了
$("#lblProcess").click(function() {
if($('#lblProcess').is('.is-checked')) {
document.querySelector('#lblProcess').MaterialCheckbox.uncheck();
}
else {
document.querySelector('#check').MaterialCheckbox.check();
}
});然后对另一个复选框重复此操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63230550
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号