无法检查表单底部的JQuery移动复选框 [英] Can't check a JQuery mobile checkbox in the bottom of form
本文介绍了无法检查表单底部的JQuery移动复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jquery mobile在弹出窗口中创建了一个表单. 这是表格的代码.
I created a form inside a popup using jquery mobile. This is the code of form.
<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 ，并且当我尝试对其进行检查时.它使我跳到页面顶部.
The problem here is i can't check the checkbox frais_deplacement and when i try to check it. it jumps me to top of the page.
推荐答案
在页面外创建popup并使用代码对其进行初始化:
Create the popup outside the page and initialize it in code:
$(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％?恕我直言，如果您的弹出窗口中有很多控件，则最好切换到对话框页面(此处为参考:
Why did you set width 100%? IMHO, if you have a lot of controls inside your popup, it may be better to switch to a dialog page (here is the reference: http://demos.jquerymobile.com/1.4.5/pages-dialog/).
这篇关于无法检查表单底部的JQuery移动复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
