在 jQuery mobile 中未选择选项卡时禁用表单输入

Posted 2023-05-09

【中文标题】在 jQuery mobile 中未选择选项卡时禁用表单输入

【英文标题】：Disable form inputs when tab is not selected in jQuery mobile

【发布时间】：2014-11-11 17:08:00

【问题描述】：

您能否告知在 jQuery Mobile 选项卡中禁用当前不可见的所有表单输入元素的代码是什么

可能存在具有相同功能的嵌套选项卡

当刚刚启动选项卡时，应启用第一个选项卡中的输入，其他选项卡中的输入 - 禁用。选择另一个选项卡应将启用的输入切换为可见的输入

可能存在隐藏输入（输入类型“隐藏”）、选择下拉列表等。

一个页面上可能有多个表单

抱歉，我什至无法想象从什么开始（因为文档是新手而感到困惑）

谢谢！

请参阅下面的标签标记。 .serializeForm() 是根据此处的其他建议编写的，据说排除了我需要的禁用控件

<h3 class="ui-bar ui-corner-all">Действия</h3>
<div style="overflow: auto">
    <div data-role="collapsible" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u">
        <h3>Скрипт разговора</h3>
        <form>
            <p>
                <strong>
                    Вы должник?
                </strong>
            </p>
            <!--gen div id-->
            <div data-role="tabs">
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="#div2511-0-0" 
                               data-ajax="false" class="ui-corner-all">
                                да
                            </a>
                        </li>
                        <li>
                            <a href="#div2511-0-1" 
                               data-ajax="false" class="ui-corner-all">

                                нет
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="div2511-0-0" style="padding: 0px; overflow: auto; border-width: thin">
                    <input type="hidden" name="isDebtor" value="1"/>
                    <div style="padding: 0px; overflow: auto; border-width: thin">
                        <p>
                            <strong>
                                каков ваш пол
                            </strong>
                        </p>
                        <label>Пол:</label>
                        <input name="gender" value="" type="text">
                    </div>
                    <div style="padding: 0px; overflow: auto; border-width: thin">
                        <p>
                            <strong>
                                Обещаете оплатить?
                            </strong>
                        </p>
                        <!--gen div id-->
                        <div data-role="tabs">
                            <div data-role="navbar">
                                <ul>
                                    <li>
                                        <a href="#div2511-2-0" 
                                           data-ajax="false" class="ui-corner-all">

                                            да
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#div2511-2-1" 
                                           data-ajax="false" class="ui-corner-all">
                                            нет
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div id="div2511-2-0" style="padding: 0px; overflow: auto; border-width: thin">
                                <input type="hidden" name="doesPromise" value="true"/>
                                <div style="padding: 0px; overflow: auto; border-width: thin">
                                    <p>
                                        <strong>
                                            Фиксируем обещание
                                        </strong>
                                    </p>
                                    ФИКСИРУЕМ!!!
                                </div>
                            </div>
                            <div id="div2511-2-1" style="padding: 0px; overflow: auto; border-width: thin">
                                <input type="hidden" name="doesPromise" value=""/>
                                <label>Причина:</label>
                                <select name="reason"  data-mini="true" class="ui-mini">
                                    <option value="noloan">
                                        Не брал кредит        
                                    </option>
                                    <option value="refuse">
                                        Немотивированный отказ        
                                    </option>
                                </select>    
                                <label>Уверенность:</label>
                                <select name="confidence" data-role="slider" data-mini="true">
                                    <option value="no">Нет</option>
                                    <option value="yes">Да</option>
                                </select>
                            </div>
                        </div>            
                    </div>
                </div>
                <div id="div2511-0-1" style="padding: 0px; overflow: auto; border-width: thin">
                    <input type="hidden" name="isDebtor" value=""/>
                </div>
            </div>            
            <p>
                <strong>
                    Сколько Вам лет?
                </strong>
            </p>
            <label>Возраст</label>
            <input name="ageFromForm"/>
            <input type="submit" value="Выполнить">
        </form>
    </div>
</div>

<script>
    $(function() 
        $("form").submit(function(event) 
            event.preventDefault();

            console.log($(this).serializeForm());
        );
    );
</script>

UPDATE这是一个联络中心的谈话脚本。选择一个选项卡是在回答一个问题，并且在一个选项卡中可能有用于后续问题的输入和其他选项卡。该脚本由树状 json 定义，如果它是一个完全 javascript 的解决方案，我会分享这个，但实际上标签是由服务器端 java 构建的，所以 javascript 的人不会理解它=)

【问题讨论】：

为什么要这样做？是为了阻止那些元素被提交吗？

发布 tabs html 标记。

@Omar，它已生成，将尝试...

查看我的答案，如果这不是您想要做的，请在此处发表评论，我会看看是否可以继续提供帮助。

【参考方案1】：

根据您的评论，您试图阻止提交不再向用户显示的元素。具有disabled 属性的元素仍将提交，只是用户无法更改它们，这是没有意义的，因为它们无论如何都不可见。

你需要做的是把每个标签的内容放在它自己的表单中

伪例子：

<div id="tab1">
   <form>
      <!-- Form stuff here -->
   </form>
</div>
<div id="tab2">
   <form>
      <!-- Form stuff here -->
   </form>
</div>

【讨论】：

我认为从多个表单中收集数据以进行 ajax 调用会更难。而且，标签集可以嵌套......

【参考方案2】：

你检查元素是否在屏幕上可见

http://www.teamdf.com/web/194/jquery-element-onscreen-visibility

一旦可见

$("input").prop('disabled', true);
$("input").prop('disabled', false);

确保您选择了正确的输入

例如，如果 div main 在视图中，则使用 .main input 选择 main 类中的所有输入

所以$(this) 选择器会很有帮助