无法选中表单底部的 JQuery 移动复选框答案

【问题标题】：Can't check a JQuery mobile checkbox in the bottom of form无法选中表单底部的 JQuery 移动复选框
【发布时间】：2017-12-25 09:05:29
【问题描述】：

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

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

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

【讨论】：

为什么在 jquery mobile 中会发生这种情况？
恕我直言，对话框页面更适合许多控件和用户交互，弹出窗口仅用于小提示或帮助信息。 -- 如果你聚焦一个弹出窗口，焦点默认转到该弹出窗口内的第一个可聚焦控件，从顶部开始。