how to create a class to disable button if the value is zero

Question

I have following buttons which is supply them values as per following:

$("#btnProduction").html('<span class="BtnsStyleText">Production (kWh):</span></br></br><span class="BtnsStyleValue">' + result[0].Production + '</span>');
$("#btnAvailability").html('<span class="BtnsStyleText">Availability (%):</span></br></br><span class="BtnsStyleValue">' + result[0].Availability + '</span>');
$("#btnCategoryA").html('<span class="BtnsStyleText">Category A Disabled Errors:</span></br></br><span class="BtnsStyleValue">' + result[0].ErrorDisabled + '</span>');
$("#btnFailedBatt").html('<span class="BtnsStyleText">Failed Battery Test:</span></br></br><span class="BtnsStyleValue">' + result[0].FailedBattery + '</span>');
$("#btnPowerConv").html('<span class="BtnsStyleText">Power Converter OFF:</span></br></br><span class="BtnsStyleValue">' + result[0].PowerConv + '</span>');

the 'result' contains numbers,could be 0,1,...when i click on this button according the number on top of them the give me further information in a grid and chart,now the thing is i want to make them unclickable if the value is zero, i can use :

$("buttons").attr("disabled", true)

but i should create condition one by one then it become messy as the page growth

Please post a Minimal, Complete, and Verifiable example

Saeed
– Saeed

2018-05-28 16:15:50 +00:00
Commented May 28, 2018 at 16:15 — Saeed
– Saeed, Commented May 28, 2018 at 16:15

David H. · Accepted Answer · 2018-05-28 16:37:51Z

1

Try using an each method. This can loop through all elements with the class "BtnsStyleValue". Then inside the each method you can place a condition that checks if the value equals 0. If so, disable button.

$('.BtnsStyleValue').each(function(){ 
    if($(this).text() == '0'){
        $(this).parents('button').prop("disabled", true);
    }
});

answered May 28, 2018 at 16:37

David H.

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

BeeBee8 · Accepted Answer · 2018-05-28 17:40:15Z

for loop is suggested in two answers but it will be slow and will use memory. Instead you can do it like this. Using ternary operator you can decide if you want to disable the button.

You just have to add .prop("disabled", (result[0].Production == 0)? true : false); in front of each line

var result = [{
  Production: 5,
  Availability: 3,
  ErrorDisabled: 0,
  FailedBattery: 10,
  PowerConv: 0
}];


$("#btnProduction").html('<span class="BtnsStyleText">Production (kWh):</span></br></br><span class="BtnsStyleValue">' + result[0].Production + '</span>').prop("disabled", (result[0].Production == 0)? true : false);
$("#btnAvailability").html('<span class="BtnsStyleText">Availability (%):</span></br></br><span class="BtnsStyleValue">' + result[0].Availability + '</span>').prop("disabled", (result[0].Availability == 0)? true : false);
$("#btnCategoryA").html('<span class="BtnsStyleText">Category A Disabled Errors:</span></br></br><span class="BtnsStyleValue">' + result[0].ErrorDisabled + '</span>').prop("disabled", (result[0].ErrorDisabled == 0)? true : false);
$("#btnFailedBatt").html('<span class="BtnsStyleText">Failed Battery Test:</span></br></br><span class="BtnsStyleValue">' + result[0].FailedBattery + '</span>').prop("disabled", (result[0].FailedBattery == 0)? true : false);
$("#btnPowerConv").html('<span class="BtnsStyleText">Power Converter OFF:</span></br></br><span class="BtnsStyleValue">' + result[0].PowerConv + '</span>').prop("disabled", (result[0].PowerConv == 0)? true : false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnProduction"></button>
<button id="btnAvailability"></button>
<button id="btnCategoryA"></button>
<button id="btnFailedBatt"></button>
<button id="btnPowerConv"></button>

Joseph Webber · Accepted Answer · 2018-05-28 16:31:32Z

Loop through all buttons using .each().

var result = [{
  Production: 10,
  Availability: 5,
  ErrorDisabled: 0,
  FailedBattery: 0,
  PowerConv: 2
}];

$("#btnProduction").html('<span class="BtnsStyleText">Production (kWh):</span></br></br><span class="BtnsStyleValue">' + result[0].Production + '</span>');
$("#btnAvailability").html('<span class="BtnsStyleText">Availability (%):</span></br></br><span class="BtnsStyleValue">' + result[0].Availability + '</span>');
$("#btnCategoryA").html('<span class="BtnsStyleText">Category A Disabled Errors:</span></br></br><span class="BtnsStyleValue">' + result[0].ErrorDisabled + '</span>');
$("#btnFailedBatt").html('<span class="BtnsStyleText">Failed Battery Test:</span></br></br><span class="BtnsStyleValue">' + result[0].FailedBattery + '</span>');
$("#btnPowerConv").html('<span class="BtnsStyleText">Power Converter OFF:</span></br></br><span class="BtnsStyleValue">' + result[0].PowerConv + '</span>');

$('button').each(function() { 
  if ($(this).find('.BtnsStyleValue').text() == 0)
    $(this).prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnProduction"></button>
<button id="btnAvailability"></button>
<button id="btnCategoryA"></button>
<button id="btnFailedBatt"></button>
<button id="btnPowerConv"></button>

Collectives™ on Stack Overflow

how to create a class to disable button if the value is zero

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related