Javascript Jquery UI选项卡和选择框-下一个/上一个按钮

我目前正在使用jQueryUI选项卡和动态选择框。我目前正在尝试禁用按钮，直到用户从选择框中选择和项。是否可能/如何让用户在进入下一个选项卡之前先单击选择框中的项目？我没有任何可以用来建造的东西，但这是我迄今为止的最爱

JS-用于上一个/下一个按钮

PHP/HTML

---

第二个解决方案有一些解决方案，但是您可以在不单击“下一步”按钮的情况下更改选项卡

一,。您可以禁用第二个选项卡$'tabs'。选项卡{已禁用：[1]}；如果选择了某个选项（例如，通过添加以下更改处理程序），则启用该选项卡：

另见

二,。您可以更新下一个单击处理程序；仅在选择性别时更改选项卡：

$('.next-tab, .prev-tab').click(function() {
    if (parseInt($('#gender').val(), 10) > 0) {
        $tabs.tabs('select', $(this).attr("rel"));
    }
    return false;
});

另见

三,。如果用户位于第一个选项卡上且未选择性别，则添加选项卡选择处理程序，该处理程序返回false；使用选项卡选择处理程序将对象添加为选项卡参数：

另见

最后，我更喜欢第一种解决方案，因为用户可以看到，在他选择性别之前，无法访问第二个选项卡，并且选择启用选项卡的结果将立即显示

==更新===

好的，如果您有不同数量的选择，根据前面选择的值取消挂起，这里有一个替代的未经测试的解决方案：

一,。替换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>');
}

三,。添加以下选择更改处理程序：

---

+哦，哇，这就是我要找的！有一件事我想知道，如果可能的话：正如你所看到的，类别有子类别。一旦类别和子类别都被选中，是否可以启用该按钮？您必须检查最后一次选择的值，例如，将“性别”替换为“颜色”。好的，唯一的问题是如果用户选择第二个子类别为类别的选项，然后他们再也不会继续了，因为颜色没有被传唤嘿，我的朋友，我对代码做了一些修改，现在我有了新的问题，这里有个问题

$('#gender').change(function() {
    $('#tabs').tabs(
        'option',
        'disabled',
        (parseInt($(this).val(), 10) > 0 ? [] : [1])
    );
});

$('.next-tab, .prev-tab').click(function() {
    if (parseInt($('#gender').val(), 10) > 0) {
        $tabs.tabs('select', $(this).attr("rel"));
    }
    return 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;
    }
});

// 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>');
}

$('#tabs').tab({ disabled: [1] });

$('.update').change(function() {
    $('#tabs').tabs(
        'option',
        'disabled',
        (
            $(this).hasClass('last') &&
            parseInt($(this).val(), 10) > 0 ?
            [] :
            [1]
        )
    );
});