javascript - botones - Pestañas de la interfaz de usuario de Jquery: habilitación/inhabilitación siguiente y anterior en función de las casillas de selección

boton siguiente javascript

Question

Actualmente estoy trabajando con las pestañas de IU de Jquery que solo he operado con los botones siguiente / anterior (esto obligará al usuario a pasar por las pestañas en orden). En mi primera pestaña, tengo un conjunto de cuadros de selección dinámicos y estoy tratando de hacer que el usuario elija una categoría y su subcategoría de la que corresponde antes, dada la posibilidad de habilitar el botón NEXT. Pero el siguiente botón no se desactiva en absoluto.

¿Cómo puedo hacer que el usuario elija entre todos los cuadros de selección correspondientes y luego activar el botón NEXT? EJEMPLO

Agregué $(''.update'').change(function() a JS para NEXT / PREVIOUS para detectar el elemento seleccionado en el último cuadro de selección y dar el visto bueno para el botón NEXT

JS para NEXT / Anterior

<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>

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 de cuadros de selección

<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> 

Answer 1

Ok, esto no ha sido probado. Solo cambie la pestaña en el clic siguiente / anterior, si no está en la primera pestaña (1) o si realmente existe la última pestaña y se elige una opción (excepto la neutral) (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;
});

Buena suerte y nos vemos mañana :-)