jQuery UI 选项卡：如果活动选项卡中的表单输入有内容，不要让用户切换选项卡

Question

我正在使用 jQuery UI 选项卡，这些选项卡位于表单中。每个选项卡都包含许多可以填写的表单域。它看起来像这样：

<form>
<tab1 href=tabcontent1> <tab2 href=tabcontent2> <tab3 href=tabcontent3>

<div tabcontent1>
<input field>
<input field>
</div>

<div tabcontent2>
<input field>
<input field>
</div>

<div tabcontent3>
<input field>
<input field>
</div>

<submit button>
</form>

问题是，例如，如果用户已经开始填写 tab1 的字段，我不希望用户能够填写 tab2 或 tab3 的字段。

所以，我正在寻找一种方法来检查用户是否已开始填写选项卡的输入字段，如果是这种情况，请隐藏其他选项卡/禁用切换到其他选项卡。

如果用户删除了他写的东西，他应该可以再次切换标签。

感谢您的帮助，非常感谢！

// 詹斯。

Answer 1

您可以使用 jQuery 选项卡的 beforeActivate 函数来执行此操作。由于您的代码不完整，因此不清楚，我将仅从 jQuery 选项卡文档中获取示例示例：

JS：

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            var content = ui.oldPanel; // Get current content
            var input = $(content).find('input.i'); //Get input
            if (input.val()) { // Check if input has any value or whatever condition you want.
                alert('not allowed');
                return false; //Stop loading new tab if condition is satisfied.
            }
        }
    });
});

演示：http://jsfiddle.net/lotusgodkk/GCu2D/416/