Флажок Google MDL не показывает флажок в модальном диалоговом окне JQuery - PullRequest
Новая
       36

Флажок Google MDL не показывает флажок в модальном диалоговом окне JQuery

0 голосов
/ 03 августа 2020

Я использую 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"); }

           

        });

именно этот код, если я установил модальное: false, тогда флажки работают, но если для него установлено значение true, то они этого не делают.

И последнее, но не менее важное: диалоговое окно отображается при запуске следующей строки 

 $("#editDialog").dialog("open");

Кто-нибудь знает, что я могу сделать, чтобы флажки работали .

1 Ответ

0 голосов
/ 03 августа 2020

Если добавить на страницу следующий код, флажок теперь работает 

$("#lblProcess").click(function() {
    if($('#lblProcess').is('.is-checked')) {
    document.querySelector('#lblProcess').MaterialCheckbox.uncheck();
  }
  else {
    document.querySelector('#check').MaterialCheckbox.check();
  }
});

, а затем повторяется для другого флажка.

...