CODEWITHSUNDEEP
javascriptjquery
user9704250
user9704250

Reputation:

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

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

Upvotes: 0

Views: 1010

Answers (3)

BeeBee8
BeeBee8

Reputation: 3074

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>

Upvotes: 0

David H.
David H.

Reputation: 11

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);
    }
});

Upvotes: 1

Joseph Webber
Joseph Webber

Reputation: 2173

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>

Upvotes: 0

Related Questions