3

現在、JqueryUIタブと動的選択ボックスを使用しています。私は現在、ユーザーが選択ボックスから項目を選択するまでボタンを無効にしようとしています。次のタブに進む前に、ユーザーが選択ボックスの項目をクリックするようにするにはどうすればよいですか？構築できるものは何もありませんが、これまでの例を次に示します。

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 &#187;</a>");
                  }

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

1 に答える 1

3

いくつかの解決策があります (2 番目の解決策では、次のボタンをクリックせずにタブを変更できます)。

1.) 次の変更ハンドラ$('#tabs').tab({ disabled: [1] });を追加するなどして、オプションが選択されている場合は、2 番目のタブ (

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

この例も参照してください。

2.)次のクリックハンドラーを更新できます。性別が選択されている場合にのみタブを変更します。

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

この例も参照してください。

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

この例も参照してください。

最後に、ユーザーが 2 番目のタブにアクセスできず (性別を選択するまで)、選択の結果 (タブを有効にする) がすぐに表示されることをユーザーが確認できるため、最初のソリューションを好みます。

===更新===

わかりました、選択の数が異なる場合（以前の選択の値に応じて）、ここで代替（テストされていない）ソリューション：

1.) updateSelectBox.jsjQuery.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]
        )
    );
});
于 2012-07-26T06:49:14.697 に答える