Question

我有一个div，其值为 0 标准。我有两个按钮， + 和 -

当值为 0 时，我希望我的 - 按钮被禁用，从高于 {的那一刻起{1}} 我希望它已启用。

Answer 1

更改代码，以便轻松获取（通过评论详细说明） -

$(document).ready(function(){
  $("#min").prop("disabled", true); // initially minus is disabled
    $("#plus").click(function () { // on click of + button
      $('#num').html(parseInt($('#num').html())+1);  // get div number, add 1 and paste again to the div(new number)
      if(parseInt($('#num').html())>0){ //if new value is greater than 0
        $("#min").prop("disabled", false); // enable - button
      }else{
        $("#min").prop("disabled", true); // otherwise remain disable
      }
  });

  $("#min").click(function () { // on click of - button
    $('#num').html(parseInt($('#num').html())-1); // get div number,substract 1 and again paste again to the div(new number)
      if(parseInt($('#num').html())>0){ // if the new number is >0
        $("#min").prop("disabled", false); // remain enable of - button
      }else{
        $("#min").prop("disabled", true); // otherwise disable - button
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="num">0</div><br/>

<input type="button" id="plus" value="+(Add)">
<input type="button" id="min" value="-(Subtrat)">

注意：不要将JavaScript语法和jQuery语法混合在一起。纯粹使用任何一种。

Answer 2

$(document).on('click', '#plus', function(event) {
   event.preventDefault();
   var value = parseInt($('#num').val());
   $('#num').val(value + 1);

   if ($("#min").is(':disabled')) {
     $("#min").prop("disabled", false);
   }
});

$(document).on('click', '#min', function(event) {
    event.preventDefault();
    var value = parseInt($('#num').val());
    $('#num').val(value - 1);

    if ((value - 1) == 0) {
        $("#min").prop("disabled", true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="num" value="0" />
<button id="min" disabled="">-</button>
<button id="plus">+</button>

Answer 3

这正是你所要求的。这是相当直接的，但随时可以要求澄清

//Set initial values
var divValue = 0;
$('.container').html(divValue);
$(".minusButton").prop("disabled", true);

//Do the magic
$(document).on("click", "button", function(e) {
  
  //This is the name of the button (uses the data attribute)
  var inputButton = $(this).data("change");
  
  //If the button is 'plus' increment else decrement
  if (inputButton === "plus") {
    divValue = divValue + 1;
  } else {
    divValue = divValue - 1;
  }
  
  //Output the value to the div
  $('.container').html(divValue);
  
  //Disable the minus button is the div value is less than 1
  if (divValue > 0) {
    $(".minusButton").prop("disabled", false);
  } else {
    $(".minusButton").prop("disabled", true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class='minusButton button' data-change='minus'>-</button>
<button type="button" class='plusButton button' data-change='plus'>+</button>
<br>
<div class='container'></div>
<br>

Answer 4

使用自定义事件的完全不同的方法：

请注意，您可以将number本身用作disabled

的布尔值

var number = 2;

$("#min").on("update", function() {
  $(this).prop('disabled', !number);
}).trigger('update');

$('#ptn1').on('update', function() {
  $(this).text(number)
}).trigger('update');

$("#plus, #min").click(function() {
  var modifier = $(this).is('#plus') ? 1 : -1;
  number += modifier;
  $('#min, #ptn1').trigger('update');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="plus">+</button>
<button id="min">-</button>
<div id="ptn1"></div>

Answer 5

或者，可以这样做：

默认情况下，两个按钮都是相同的className，“减号”按钮为disabled，因为#theDiv字段的默认“值”为 0 。
点击两个按钮中的任意一个，我们选择#theDiv和 parseInt() 的文字。
根据按钮的id属性的值，我们使用ternary operator来增加或减少它。
如果更新的数字超过 0 ，我们会启用#minus按钮，否则会被停用。
最后，我们更新了#theDiv。

jsFiddle

$('.btn').on('click', function() {
  var input = $('#theDiv'),
    theVal = parseInt(input.text());

  theVal = ($(this).attr('id') == 'plus') ? theVal + 1 : theVal - 1;
  $('#minus').attr('disabled', (theVal <= 0)); // returns true if 0
  input.text(theVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="minus" class="btn" disabled>-</button>
<button id="plus" class="btn">+</button>
<div id="theDiv" style="display:inline-block;">0</div>

低于0时禁用按钮，高

5 个答案: