Google MDL Checkbox 未显示对 JQuery 模态对话框的检查
[英]Google MDL Checkbox not showing the check on JQuery modal dialog box
问题描述
我正在使用 JQuery 在 MDL 页面上提供模式对话框。 该对话框包括两个复选框。 当我将对话框设置为模式时，复选框停止工作，当对话框不是模式时，复选框工作。
页面的Header如下；
<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>
Dialog 使用以下代码初始化。
$("#editDialog").dialog({
autoOpen: false,
modal: true,
width: 1100,
height: 560,
resizable: false,
open: function () { $(".ui-dialog").css("box-shadow", "#CCC 15px 15px 15px"); }
});
正是这段代码，如果我设置 modal:false 那么复选框可以工作，但如果它设置为 true 那么它们不会。
最后但并非最不重要的是，通过运行以下行显示对话框
$("#editDialog").dialog("open");
任何人都知道我可以做些什么来使复选框起作用。
1 个解决方案
解决方案1
0 2020-08-03 15:50:07
通过将以下代码添加到页面，复选框现在可以工作
$("#lblProcess").click(function() {
if($('#lblProcess').is('.is-checked')) {
document.querySelector('#lblProcess').MaterialCheckbox.uncheck();
}
else {
document.querySelector('#check').MaterialCheckbox.check();
}
});
然后对另一个复选框重复它。
带有复选框和链接的jQuery模式对话框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.