我目前正在使用Jquery UI标签和动态选择框。我正在尝试禁用按钮,直到用户从选择框中选择和项目。是否可以/如何让用户在进入下一个选项卡之前首先单击选择框中的项目?我没有任何我可以建立的东西,但到目前为止这里是我的EXAMPLE。
JS-上一个/下一个按钮
<script>
$(function() {
var $tabs = $('#tabs').tabs();
$(".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() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
</script>
PHP / 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>
答案 0 :(得分:3)
有一些解决方案(使用第二种解决方案,您可以在不单击下一个按钮的情况下更改选项卡)。
1。)如果选择了一个选项,您可以禁用第二个标签($('#tabs').tab({ disabled: [1] });
)并启用标签页。通过添加以下更改处理程序:
$('#gender').change(function() {
$('#tabs').tabs(
'option',
'disabled',
(parseInt($(this).val(), 10) > 0 ? [] : [1])
);
});
另见this example。
2.。)您可以更新下一次点击处理程序;仅在选择性别时更改选项卡:
$('.next-tab, .prev-tab').click(function() {
if (parseInt($('#gender').val(), 10) > 0) {
$tabs.tabs('select', $(this).attr("rel"));
}
return false;
});
另见this example。
3。)添加选项卡选择处理程序,如果用户位于第一个选项卡上且没有选择性别,则返回false
;使用选项卡选择处理程序
var iOldTab = 0;
var $tabs = $('#tabs').tabs({
select: function(event, ui) {
var bChange = (iOldTab != 0 || parseInt($('#gender').val(), 10) > 0);
if (bChange) {
iOldTab = ui.index;
}
return bChange;
}
});
另见this example。
最后我更喜欢第一种解决方案,因为用户可以看到无法到达第二个标签(直到他选择性别),并且会立即显示选择(启用标签)的结果。
=== UPDATE ===
好的,如果你有不同的选择数量(在先前选择的值上有所改变),这里是另一种(未经测试的)解决方案:
1。)替换 updateSelectBox.js 中jQuery.getJSON
的内容(将标记真正的最后一个选项):
// following line is added
$('.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>');
}
2.。)使用已禁用的标签2
调用标签$('#tabs').tab({ disabled: [1] });
3。)添加以下选择更改处理程序:
$('.update').change(function() {
$('#tabs').tabs(
'option',
'disabled',
(
$(this).hasClass('last') &&
parseInt($(this).val(), 10) > 0 ?
[] :
[1]
)
);
});