Question

我希望能够在页面加载时禁用上一个和下一个按钮。然后当我选择第一个选项来禁用上一个按钮时，当我选择最后一个选项来禁用下一个按钮时。当选择第一个和最后一个之间的选项时;应启用下一个和上一个按钮。

$(document).ready(function() {
    $(".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并单击最后一个选项旁边的按钮时，它不起作用。 My demo in fiddle

Answer 1

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

我修改了您的JavaScript，以便下一个和上一个按钮触发下拉列表的“更改”事件;并略微修改了“更改”事件中的代码，以说明您尝试创建的行为。

您可以在JSFiddle here

中使用它

以下代码：

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

在选择列表的开头/结尾处禁用next / prev

1 个答案: