Question

你能否告诉我们在jQuery Mobile标签中禁用所有当前不可见的表单输入元素的代码是什么，假设

可能存在具有相同功能的嵌套选项卡
当选项卡刚刚启动时，应启用第一个选项卡中的输入，其他 - 禁用。选择另一个选项卡应将已启用的输入切换为可见的
可能有隐藏的输入（输入类型＆＃34;隐藏＆＃34;），选择下拉列表等。
页面上可能有多种表格

对不起，我甚至无法想象从什么开始（被文档作为新手混淆）

谢谢！

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

＆＃13;

<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>

＆＃13;

更新这是一个联络中心的谈话脚本。选择选项卡正在回答问题，在选项卡中可能会有后续问题的输入和其他选项卡。这个脚本是由类似树的json定义的，如果它是一个完全的javascript解决方案我会分享它，但实际上tab是由服务器端java构建的，所以javascript人们不会对它进行apreciate it =）

Answer 1

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

您需要做的是将每个标签的内容放在其自己的表单中

Psudo示例：

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

Answer 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)选择器会有所帮助

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

2 个答案: