个人中心
gpt4 book ai didi

javascript - 无法选中表单底部的 JQuery 移动复选框

转载 作者：行者123 更新时间：2023-12-03 02:49:03 24 4
gpt4 key购买 nike

我使用 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以及当我尝试检查它时。它让我跳到页面顶部。

最佳答案

在页面外部创建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/ )。

关于javascript - 无法选中表单底部的 JQuery 移动复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47967212/

24 4 0
文章推荐： javascript - Vue循环列表-将ajax返回的数据附加到列表中？
文章推荐： loops - Dart:从foreach循环中的if退出函数
文章推荐： dart - Dart-使长时间运行的同步功能异步
文章推荐： javascript - 脚本在进度条开始之前执行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com