0

ページの読み込み時に前と次のボタンを無効にできるようにしたい。次に、最初のオプションを選択して前のボタンを無効にし、最後のオプションを選択して次のボタンを無効にします。最初と最後の間のオプションが選択されている場合。次のボタンと前のボタンの両方を有効にする必要があります。

$(document).ready(function() {
    $(".nextbutton").button({ 無効: true });



$('.dropdown').change(function() {
    if (($('.dropdown').val() == 0) || ($('.dropdown').val() ==8)) {
      $(".nextbutton").button({ disabled: true });
    } else {
      $(".nextbutton").button({ disabled: false });
    }
});




$(".prevbutton").button({ 無効: true });


$('.dropdown').change(function() {
    if ($('.dropdown').val() < 2) {
      $(".prevbutton").button({ disabled: true });
    } else {
      $(".prevbutton").button({ disabled: false });
    }
});

ドロップダウンリストから選択するとコードで機能しますが、たとえば、オプション2を選択して最後のオプションの横にあるボタンをクリックすると機能しません。フィドルでの私のデモ

4

1 に答える 1

0

問題は、ボタンがドロップダウン (ボタンの無効/有効ステータスを設定している場所) で変更イベントをトリガーしていないことです。

[次へ] ボタンと [前へ] ボタンがドロップダウンの「変更」イベントをトリガーするように JavaScript を修正しました。作成しようとしている動作を説明するために、「change」イベントのコードを少し変更しました。

ここで JSFiddle で遊ぶことができます

以下のコード：

$(document).ready(function() {
    $(".nextbutton").button({ disabled: true });

    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
            //If nothing is selected; only previous button is disabled
            $(".prevbutton").button({ disabled: true });
        } else if ($('.dropdown').val() == 1) {
            //If the first option is selected; enabled the next button
            $(".prevbutton").button({ disabled: true });
            $(".nextbutton").button({ disabled: false });            
        } else if ($('.dropdown').val() == 8) {
            //If the last option is selected disable the next button
            $(".nextbutton").button({ disabled: true }); 
        } else {
            //Anywhere else we enable both buttons
            $(".nextbutton").button({ disabled: false });
            $(".prevbutton").button({ disabled: false });
        }
    });

    $(".prevbutton").button({ disabled: true });        
});

$("#next").click(function() {
  var nextElement = $('#mylist > option:selected').next('option');
  if (nextElement.length > 0) {
      $('#mylist > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
      //Trigger change to modify the status of the drop down/buttons
      $('.dropdown').trigger('change');      
  }
});

$("#prev").click(function() {
  var nextElement = $('#mylist > option:selected').prev('option');
  if (nextElement.length > 0) {
      $('#mylist > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
      //trigger change; to modify the status of the drop down/buttons
      $('.dropdown').trigger('change');        
  }  
});
于 2013-03-24T13:07:11.930 に答える