Habpanel : disabling a button base on select field

[Jacek_Kaczmarczyk (Jacek Ka)]

i am playing with my widget. i want to disable the up / down buttons for thermostat base on his mode off/auto/heat. Any ideas why this code is not working ?

<div class="section" oc-lazy-load="['/static/thermostat.js']">>
	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div></div>
  <div class="title">Klimat</div>
  <div class="summary ng-binding">{{itemValue('TempSensor1_CurrentTemp')}} &#176C</div>
  <div class="controls"></div>
</div>

<div ng-init="SystemMode={
              'auto': 'Automatyczny', 
              'off': 'Wyłączony', 
              'heat': 'Grzanie'}" />

<table style="width: 100%; border-collapse: separate; border-spacing: 0px;">
        <tr>
          <td colspan="2">
            <h2 class="rzc-title">Salon</h2>
          </td>
        </tr>
  
  			<tr>
   				<td colspan="2">
  					Aktualna temperatura : {{itemValue('TempSensor1_CurrentTemp')}}°C
  				</td>
  			</tr>
  	<tr>
   				<td colspan="2">
  					Aktualna wilgotność : {{itemValue('TempSensor1_Humidity')}} %
  				</td>
  	</tr>


    <div class="switch btn-group switch-leftborder">
    <button id="decreaseButton" class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px"
			ng-click="sendCmd('RadiatorAC1_TargetTemperature', itemValue('RadiatorAC1_TargetTemperature') * 1 - 0.5) ">
			<i class="glyphicon glyphicon-menu-down"></i>
		</button>
    <button class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px">
            {{itemValue('RadiatorAC1_TargetTemperature')}}°C
    </button>
    <button id="increaseButton" class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px"
			ng-click="sendCmd('RadiatorAC1_TargetTemperature', itemValue('RadiatorAC1_TargetTemperature') * 1 + 0.5) ">
			<i class="glyphicon glyphicon-menu-up"></i>
		</button>
   </div> 

  <tr>
    <td>
      <div style="margin-left: 10px; width: 100%;" class="switch btn-group switch-leftborder" uib-dropdown>
        <button type="button" class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px" uib-dropdown-toggle >
          <span>{{SystemMode[itemValue('RadiatorAC1_SystemMode')]}} </span><span class="caret" id="rzc-caret"></span>
        </button>
        <ul class="dropdown-menu" style="margin-left: 15px; width: 100%;" id="rzc-zone-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
          <li role="menuitem"><a ng-click="sendCmd('RadiatorAC1_homekit_TargetHeatingCoolingMode', 'auto')">Program</a></li>
          <li role="menuitem"><a ng-click="sendCmd('RadiatorAC1_homekit_TargetHeatingCoolingMode', 'heat')">Grzeje</a></li>
          <li role="menuitem"><a ng-click="sendCmd('RadiatorAC1_homekit_TargetHeatingCoolingMode', 'off')" id="offOption">Wyłączony</a></li>
          </ul>
        
    	</div>
    </td>
  </tr>
    </table>

cat /etc/openhab/html/static/thermostat.js

document.getElementById('offOption').addEventListener('click', function() {
    document.getElementById('decreaseButton').disabled = true;
    document.getElementById('increaseButton').disabled = true;
});

document.getElementById('rzc-zone-dropdown').addEventListener('click', function(event) {
    if (event.target.id !== 'offOption') {
        document.getElementById('decreaseButton').disabled = false;
        document.getElementById('increaseButton').disabled = false;
    }
});

[Jacek_Kaczmarczyk (Jacek Ka)]

ok i get it working with ng-if directive. One more question

<button id="decreaseButton" class="btn btn-default" style="width: 100%; height: 2em; font-size: 30px"
			ng-click="sendCmd('RadiatorAC1_TargetTemperature', itemValue('RadiatorAC1_TargetTemperature') * 1 - 0.5) ">
			<i class="glyphicon glyphicon-menu-down"></i>
		</button>

how to send additional ng-click command from this button but only if itemX has a value == ‘off’.

1. Always after click sendCMD to RadiatorAC1_TargetTemperature
   and
2. Check if itemX == ‘off’ if yes sendCMD also to itemX with ‘heat’