Question

我有以下按钮，按照以下方式为它们提供值：

$("#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>');

'结果'包含数字，可能是0,1，...当我根据它们上面的数字点击这个按钮时，在网格和图表中给我更多信息，现在我想要的东西如果值为零，使它们不可点击，我可以使用：

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

但是我应该逐个创建条件然后随着页面增长而变得混乱

Answer 1

使用x87循环显示所有按钮。

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>

Answer 2

尝试使用each method。这可以使用类“BtnsStyleValue”遍历所有元素。然后在每个方法中放置一个条件，检查该值是否等于0.如果是，则禁用按钮。

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

Answer 3

在两个答案中建议使用

for循环，但它会很慢并且会使用内存。相反，你可以这样做。使用三元运算符，您可以决定是否要禁用该按钮。

您只需在每行前面添加.prop("disabled", (result[0].Production == 0)? true : false);

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>

如果值为零，如何创建一个禁用按钮的类

3 个答案: