我目前正在使用jQuery UI标签和ajax。我总共有3个标签，只能通过“下一个”＆amp; “上一页”按钮。我已设置参数：如果您保留输入字段car_name，则在tab1中，您将收到一条警告消息以及与tab2类似的参数。
我想要的设置：如果不符合参数，则用户无法前进到下一个标签。但是，那部分不起作用。用户收到警报：他们可以忽略，再次单击下一步，然后前进到下一个选项卡。如何在完成参数（填写输入字段）之前禁用“下一步”按钮？ EXAMPLE
谢谢
JS
<script>
$(function () {
var $tabs = $('#tabs').tabs({
disabled: [0, 1, 2],
select: function () {
$.ajax({
type: "POST",
url: "post_tabs.php",
data: {
"name": $("#car_name").val(),
"title": $("#title").val(),
"price": $("#price").val()
},
success: function (result) {
$("#tab-3").html(result);
}
});
}
});
$(".ui-tabs-panel").each(function (i) {
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function () {
var prev = $(this).hasClass('prev-tab');
var currentTab = $('#tabs').tabs('option', 'selected');
if (
prev || /*(A)*/ (
currentTab == 0 && /*(B)*/
$.trim($('#car_name').val()).length > 0
) || (
currentTab == 1 && /*(C)*/
$.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0)
) {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
} else if (!prev) {
switch (currentTab) {
case 0:
alert('Please choose an option.', 'Alert Dialog');
break;
case 1:
alert('Please fill out all the required fields.', 'Alert Dialog');
break;
}
}
return false;
});
$('.next-tab, .prev-tab').click(function () {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
return false;
});
});
</script>
HTML
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="car_name">Car Model</label>
<input type="text" id="car_name" class="detail" name="car_name" value="" /> <br>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<label for="title">Title</label>
<input type="text" id="title" name="title" size="60" autocomplete="off" value=""/><br>
<label for="price">Price</label>
<input type="text" id="price" name="price" size="60" autocomplete="off" value=""/><br>
</div>
<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
</div>
答案 0 :(得分：3)
您的代码中有一些奇怪的东西。你注册了“next”和“prev”两次......
这不是你想要的。
您想要的是以下行为：
这意味着您应该更改以下内容
.prev-tab选择器 - 并移除对prev vairable的任何提及。此方法只应处理next。 next，这个应该只处理prev。 所以你的JavaScript看起来像这样：
$('.next-tab').click(function () {
var currentTab = $('#tabs').tabs('option', 'selected');
if (
(
currentTab == 0 && /*(B)*/
$.trim($('#car_name').val()).length > 0
) || (
currentTab == 1 && /*(C)*/
$.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0
)
) {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
} else {
switch (currentTab) {
case 0:
alert('Please choose an option.', 'Alert Dialog');
break;
case 1:
alert('Please fill out all the required fields.', 'Alert Dialog');
break;
}
}
console.log("preventing default");
return false;
});
$('.prev-tab').click(function () {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
return false;
});
这应该可以解决您的问题。
您可以在操作中看到这一点，并在my site
下载我的资源以上将解答您的问题。
现在，请允许我有机会建议一种方法，让你的代码缩短一点“下一个”场景。
在$('.next-tab').click(function () {行的正上方创建以下函数
function isEmpty( item ) {
return $.trim(item.val()).length <= 0;
}
现在 - 在点击class='required'时不应为空的每个输入字段上添加next。
添加data-alert="The alert message you want to show"
现在HTML应该是这样的
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide" data-alert="Please choose an option.">
<label for="car_name">Car Model</label>
<input type="text" id="car_name" class="required detail" name="car_name" value="" /> <br>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide" data-alert="Please fill out all the required fields.">
<label for="title">Title</label>
<input type="text" id="title" class="required" name="title" size="60" autocomplete="off" value=""/><br>
<label for="price">Price</label>
<input type="text" id="price" class="required" name="price" size="60" autocomplete="off" value=""/><br>
</div>
现在JS代码应该更小，更易于维护（即使你添加了另一个带有必填字段的标签 - 它也不应该改变） - 这里是
$('.next-tab').click(function () {
var $tab = $(this).closest(".ui-tabs-panel");
var $requiredFields = $tab.find(".required");
var canContinue = true;
$requiredFields.each(function(index,item){
console.log(["checking" , item]);
if ( canContinue && isEmpty($(item))){ alert( $tab.attr("data-alert"), 'Alert Dialog' ); canContinue = false; }
});
if ( canContinue )
{
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
}
return false;
});