Jquery UI选项卡:基于选择框的下一个和上一个启用/禁用 [英] Jquery UI Tabs: Next and Previous enable/disable based on select boxes
问题描述
我目前正在使用Jquery UI标签,我只使用下一个/上一个按钮(这将强制用户按顺序浏览标签)。在我的第一个选项卡中,我有一组动态选择框,我试图让用户在给出启用NEXT按钮的可能性之前从中选择一个类别及其子类别。但是下一个按钮根本没有被禁用。
I am currently working with Jquery UI tabs that I have only operating with next/previous buttons(this will force the user to go through the tabs in order). In my first tab I have a set of dynamic select boxes and I am trying to get the user to choose a category and its subcategory from that corresponds before given the possibility to enable the NEXT button. But the next button is not being disabled at all.
如何让用户从所有相应的选择框中进行选择,然后启用NEXT按钮? 示例
How can I get the user to choose from all the corresponding select boxes and then enabling the NEXT button? EXAMPLE
I添加 $('。update')。将(function()
更改为JS for NEXT / PREVIOUS以检测最后一个选择框中的所选项目,然后为下一个按钮
I added $('.update').change(function()
to the JS for NEXT/PREVIOUS to detect the selected item in the last select box and give the go for the NEXT Button
下一个/上一个的JS
<script>
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
});
$(".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>");
}
});
$('.update').change(function() {
$('#tabs').tabs(
'option',
'disabled',
(
$(this).hasClass('last') &&
parseInt($(this).val(), 10) > 0 ?
[] :
[1]
)
);
});
$('.next-tab, .prev-tab').click(function() {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1]);
return false;
});
});
</script>
upadateSelectBox.js
// following line is added to detect last select box picked
$('.update').removeClass('last');
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled hidden');
} else {
// following line is changed
obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
}
选择框的HTML
<select name="gender" id="gender" class="update" size="7">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['category_name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="category" id="category" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>
推荐答案
好的,这是未经测试的。如果您不在第一个选项卡(1)或真的最后选项卡上,则仅更改下一个/上一个单击的选项卡,并且选项(中性除外)为选择(2)。
Ok, this is untested. Only change the tab on next/previous click, if you are not on the first tab (1) or the really last tab exist and an option (except the neutral) is choosen (2).
$('.next-tab, .prev-tab').click(function() {
var tabIndex = $(this).attr("rel");
if (
/*(1)*/ $('#tabs').tabs('option', 'selected') > 0 ||
/*(2)*/ ($('.update.last').length > 0 && parseInt($('.update.last').val(), 10) > 0)
) {
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1]);
}
return false;
});
祝你好运并明天见到你: - )
Good luck and see you tomorrow :-)
这篇关于Jquery UI选项卡:基于选择框的下一个和上一个启用/禁用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!