Google MDL Checkbox not showing the check on JQuery modal dialog box
Question
I'm using JQuery to provide a modal dialog box on an MDL Page. That dialog box includes two checkboxes. When I set the dialog box to modal, the checkboxes stop working, when the dialog box is not modal the checkboxes work.
The Header of the page is as follows;
<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>
The dialog is defined as follows;
<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>
The Dialog is initialised with the following code.
$("#editDialog").dialog({
autoOpen: false,
modal: true,
width: 1100,
height: 560,
resizable: false,
open: function () { $(".ui-dialog").css("box-shadow", "#CCC 15px 15px 15px"); }
});
it is this code which if I set modal:false then the checkboxes work, but if it set to true then they don't.
Last but not least the dialog is shown by running the following line
$("#editDialog").dialog("open");
Anyone know what I can do to make the checkboxes work.
1 answers
solution1
0 2020-08-03 15:50:07
By adding the following code to the page the checkbox now works
$("#lblProcess").click(function() {
if($('#lblProcess').is('.is-checked')) {
document.querySelector('#lblProcess').MaterialCheckbox.uncheck();
}
else {
document.querySelector('#check').MaterialCheckbox.check();
}
});
and then repeating it for the other checkbox.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery modal dialog with checkbox and link
JQuery Dialog Modal Box Frame
MDL Modal Dialog click behind modal background
handle mdl table check box
How to check checkbox after show modal box?
Modal Dialog Box Not Opening JQuery for Chatbox
jQuery .toggle() Modal show/hide dialog box
Showing a modal dialog with jquery ui without an element?
Google's MDL - Dialog not closing in Safari
How to check checkbox value in Jquery UI Dialog
Related Tags