Reputation:
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
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
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
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