0

我希望能够在页面加载时禁用上一个和下一个按钮。然后，当我选择第一个选项以禁用上一个按钮时，以及当我选择最后一个选项以禁用下一个按钮时。When an option between the first and last is selected; 应该启用下一个和上一个按钮。

$(文档).ready(函数() {
    $(".nextbutton").button({ disabled: true });



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




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


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

当我从下拉列表中进行选择时，它在我的代码中有效，但是当我选择选项 2 并单击最后一个选项旁边的按钮时，它不起作用。我的小提琴演示

4

1 回答 1

0

问题是您的按钮没有触发下拉菜单中的更改事件（您可以在其中设置按钮的禁用/启用状态）。

我已经修改了您的 JavaScript，以便“下一个”和“上一个”按钮触发下拉菜单的“更改”事件；并稍微修改了“更改”事件中的代码，以说明您尝试创建的行为。

您可以在此处的 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 回答