無法檢查表單底部的JQuery移動復選框
[英]Can't check a JQuery mobile checkbox in the bottom of form
問題描述
我使用jquery mobile在彈出窗口中創建了一個表單。 這是表格的代碼。
<div data-role="popup" id="popupDetailles" data-theme="a" data-overlay-theme="b" style="width:100%;" data-transition="pop" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" data-dismissible="false">
<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<form>
<div style="padding:0px 5px 0px 5px;">
<h3 style="text-align: center;" id="header-popup"></h3>
<hr width="100%" size="2" color="black">
<h4 style="margin-bottom:0">Type de main doeuvre <span class="style2" style="color: red">*</span></h4>
<select name="typeMainOeuvre" data-theme="a" id="typeMainOeuvre" required>
</select>
<h4 style="margin-bottom:0">Type de temps</h4>
<select name="typeTemps" data-theme="a" id="typeTemps">
</select>
<div id="div_dureeTS">
<h4 style="margin-bottom:0">Heures de travail</h4>
<div align="center">
<input name="txtDuree" id="txtDuree" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "overrideDurationOrder": ["h", "i"], "overrideTimeFormat": 24, "maxDur":85500, "overrideDurationFormat":"%Dl:%DM", "themeButton": "b", "themeInput": "a", "theme": "a", "themeHeader": "a", "hideInput": true, "useInlineBlind":true, "useLang": "fr"}' />
</div>
</div>
<div id="div_dureeTS">
<h4 style="margin-bottom:0">Heure de début de la journée</h4>
<div align="center">
<input name="txtDebutJournee" id="txtDebutJournee" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "overrideDurationOrder": ["h", "i"], "overrideTimeFormat": 24, "maxDur":85500, "overrideDurationFormat":"%Dl:%DM", "themeButton": "b", "themeInput": "a", "theme": "a", "themeHeader": "a", "hideInput": true, "useInlineBlind":true, "useLang": "fr"}' />
</div>
</div>
<h4 style="margin-bottom:0">Frais de stationnement ($)</h4>
<input name="frais_stationnement" data-theme="a" id="frais_stationnement" type="number" class="classe-frais_stationnement" min='0' max='9999999' onkeypress="return isNumberKey(event, this.id)"/>
<h4 style="margin-bottom:0">Kilométrage (Km)</h4>
<input name="Kilometrage" data-theme="a" id="Kilometrage" type="number" class="classe-Kilometrage" min='0' max='9999999' onkeypress="return isNumberKey(event, this.id)"/>
<label>
<input type="checkbox" id="frais_deplacement" name="frais_deplacement"> Inclure frais de déplacement CCQ (65km et plus)
</label>
<h4 style="margin-bottom:0">Commentaire</h4>
<textarea name="textarea" data-theme="a" id="txtCommentTimeSheet"></textarea>
<div align="center">
<button type="button" data-icon="check" data-position="fixed" data-inline="true" data-theme="b" class="buttonBlue" id="btnSaveHeures">Sauvegarder</button>
</div>
</div>
</form>
</div>
這里的問題是我無法選中frais_deplacement復選框，而當我嘗試對其進行檢查時。 它使我跳到頁面頂部。
1 個解決方案
解決方案1
1 2017-12-25 13:25:12
在頁面外創建popup ，並使用代碼對其進行初始化：
$(document).ready(function() { $( "#popupDetailles" ).enhanceWithin().popup(); });
.ui-popup { padding: 0.5em; // some air }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page-one"> <div data-role="content" role="main"> <a class="ui-btn ui-btn-inline" href="#popupDetailles" data-rel="popup">Open Popup</a> </div> </div> <div id="popupDetailles" data-theme="a" data-overlay-theme="b" data-transition="pop" data-dismissible="false"> <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> <form> <div style="padding:0px 5px 0px 5px;"> <h3 style="text-align: center;" id="header-popup"></h3> <hr width="100%" size="2" color="black"> <h4 style="margin-bottom:0">Type de main doeuvre <span class="style2" style="color: red">*</span></h4> <select name="typeMainOeuvre" data-theme="a" id="typeMainOeuvre" required> </select> <h4 style="margin-bottom:0">Type de temps</h4> <select name="typeTemps" data-theme="a" id="typeTemps"> </select> <div id="div_dureeTS"> <h4 style="margin-bottom:0">Heures de travail</h4> <div align="center"> <input name="txtDuree" id="txtDuree" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "overrideDurationOrder": ["h", "i"], "overrideTimeFormat": 24, "maxDur":85500, "overrideDurationFormat":"%Dl:%DM", "themeButton": "b", "themeInput": "a", "theme": "a", "themeHeader": "a", "hideInput": true, "useInlineBlind":true, "useLang": "fr"}' /> </div> </div> <div id="div_dureeTS"> <h4 style="margin-bottom:0">Heure de début de la journée</h4> <div align="center"> <input name="txtDebutJournee" id="txtDebutJournee" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "overrideDurationOrder": ["h", "i"], "overrideTimeFormat": 24, "maxDur":85500, "overrideDurationFormat":"%Dl:%DM", "themeButton": "b", "themeInput": "a", "theme": "a", "themeHeader": "a", "hideInput": true, "useInlineBlind":true, "useLang": "fr"}' /> </div> </div> <h4 style="margin-bottom:0">Frais de stationnement ($)</h4> <input name="frais_stationnement" data-theme="a" id="frais_stationnement" type="number" class="classe-frais_stationnement" min='0' max='9999999' onkeypress="return isNumberKey(event, this.id)" /> <h4 style="margin-bottom:0">Kilométrage (Km)</h4> <input name="Kilometrage" data-theme="a" id="Kilometrage" type="number" class="classe-Kilometrage" min='0' max='9999999' onkeypress="return isNumberKey(event, this.id)" /> <label> <input type="checkbox" id="frais_deplacement" name="frais_deplacement"> Inclure frais de déplacement CCQ (65km et plus) </label> <h4 style="margin-bottom:0">Commentaire</h4> <textarea name="textarea" data-theme="a" id="txtCommentTimeSheet"></textarea> <div align="center"> <button type="button" data-icon="check" data-position="fixed" data-inline="true" data-theme="b" class="buttonBlue" id="btnSaveHeures">Sauvegarder</button> </div> </div> </form> </div> </body> </html>
為什么將寬度設置為100％？ 恕我直言，如果您的彈出窗口內有很多控件，則最好切換到對話框頁面（此處為參考： http : //demos.jquerymobile.com/1.4.5/pages-dialog/ ）。
在頁面上beforeshow需要使用jQuery mobile中的名稱和值來選中復選框
[英]on pagebeforeshow need to check the checkbox using name and value in jquery mobile
使用jQuery Mobile時無法以編程方式選中一個復選框
[英]Unable to programatically check a checkbox when using jQuery Mobile
如何檢查使用jQuery Mobile在JavaScript中動態創建的復選框事件
[英]how to check checkbox event dynamically created in javascript using jquery mobile
如何使用 Jquery 檢查是否選中了 2 個 Contact Form 7 復選框輸入？
[英]How can I check if 2 Contact Form 7 checkbox inputs are checked or not, with the use of Jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.