Jquery UI 选项卡:基于选择框的下一个和上一个启用

Jquery UI Tabs: Next and Previous enable/disable based on select boxes(Jquery UI 选项卡:基于选择框的下一个和上一个启用/禁用)

问题描述

我目前正在使用仅使用下一个/上一个按钮操作的 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.

如何让用户从所有相应的选择框中进行选择，然后启用下一步"按钮?示例

How can I get the user to choose from all the corresponding select boxes and then enabling the NEXT button? EXAMPLE

我将 $('.update').change(function() 添加到 JS for NEXT/PREVIOUS 以检测最后一个选择框中的选定项目并为 NEXT 按钮提供支持

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

用于 NEXT/Previous 的 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 &#187;</a>");
        }

        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; 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>

updateSelectBox.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 选项卡:基于选择框的下一个和上一个启用/禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！