0より低いときにボタンを無効にし、高いときに有効にする

Question

0の値を持つdivがある。 私は2つのボタン、+と-

値は0が、私は私の-ボタンを無効にすることにしたいと瞬間から、それは私がそれを有効にしたい高く、その後0であるを持っています。

if (number == 0) { 
    $("#min").prop("disabled", true); 
    $("#plus").click(function() { 
    number = number + 1; 
    document.getElementById('num').innerHTML = number; 
    }); 
} 

if (number > 0) { 
    $("#min").prop("disabled", false); 

    $("#plus").click(function() { 
    number = number + 1; 
    document.getElementById('ptn1').innerHTML = number; 
    }); 

    $("#min").click(function() { 
    number = number - 1; 
    document.getElementById('ptn1').innerHTML = number; 
    }); 
} 

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の構文を混ぜて使用しないでください。純粋にどちらか1つを使用してください。

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

全く異なるアプローチで使用してカスタムイベント気軽に：あなたはdisabled

のためのブールとしての地位を numberを使用することができます

注意を

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

：#theDivフィールドのデフォルト「の値が」0あるので

• 両方のボタンに同じクラス名、「マイナス」ボタンを与えますが、デフォルトではdisabledです。
• 2つのボタンのいずれかをクリックすると、#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>