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.