Make checkbox disabled based on case's state value

[Prity Shaw]

I created a custom widget to show cases in list view with checkboxes. I want to make the respective checkbox enabled only if the case is in 'Open' status otherwise it should be disabled
I can fetch the state value in HTML using {{::item.state}} but conditions not working as expected.

Test 1:
In this scenario the disabled= "c.isOpen({{::item.state}})" always set to true and the c.isOpen(state) function is not even getting called. So, all the checkboxes is disabled irrespective of the state.

HTML:


<table ng-if="data.items.length" class="grid-table"  class="tableContent">
  <thead>
          <tr>
    <th>Action</th>
            <th ng-repeat="field in ::data.header">{{field}}</th>
  </tr>
        </thead>
<tr ng-repeat="item in data.cases.list">
<td>
<input type='checkbox' id = {{item.check}} name = {{item.check}} checklist-model="test" checklist-value='' ng-click="c.selectedList(item)" disabled= "c.isOpen({{::item.state}})"/>
    </td>
 <td role="cell" ng-repeat="field in ::data.row">{{item[field]}}</td>
</tr>
</table>


Client script :
c.isOpen = function(state){
alert('inside isOpen func');
if(state == 'Open'){
return false;
}
return true;
};

Test scenario 2:
The checkboxes are completely getting hidden and not visinle at all irrespective of the state.

HTML :



<table ng-if="data.items.length" class="grid-table"  class="tableContent">
  <thead>
          <tr>
    <th>Action</th>
            <th ng-repeat="field in ::data.header">{{field}}</th>
  </tr>
        </thead>
<tr ng-repeat="item in data.cases.list">
<td>

<span ng-if={{::item.state}}>

<input type='checkbox' id = {{item.check}} name = {{item.check}} checklist-model="test" checklist-value='' ng-click="c.selectedList(item)"/>

</span>
    </td>
 <td role="cell" ng-repeat="field in ::data.row">{{item[field]}}</td>
</tr>
</table>


I attached the snapshots of portal for both of the scenarios for reference. Please guide what conditions i should put so the checkboxes for resolved cases will be disables and the open cases checkboxes are enabled.

[Mohith Devatte]

Hello @Prity Shaw ,

You can do one thing try the below code by using document by get element by ID

c.isOpen = function(state){
alert('inside isOpen func');
if(state == 'Open'){
document.getElementById('your_checkbox_tag_id').checked=true;
}
else
{
document.getElementById('your_checkbox_tag_id').checked=false
}
};

Hope this helps 

mark my answer correct if it helps you

[Prity Shaw]

Hi Mohith,

Thanks for your response!

I tried this. But the c.isOpen() function is not even getting called and the alert in line no 2 is not getting printed.

Just confused if I should change some syntax in HTML so the function gets called.

<table ng-if="data.items.length" class="grid-table"  class="tableContent">
  <thead>
          <tr>
    <th>Action</th>
            <th ng-repeat="field in ::data.header">{{field}}</th>
  </tr>
        </thead>
<tr ng-repeat="item in data.cases.list">
<td>
<input type='checkbox' id = {{item.check}} name = {{item.check}} checklist-model="test" checklist-value='' ng-click="c.selectedList(item)" disabled= "c.isOpen({{::item.state}})"/>
    </td>
 <td role="cell" ng-repeat="field in ::data.row">{{item[field]}}</td>
</tr>
</table>

Regards,

Prity

[Prity Shaw]

Hi Mohith,

Thanks for your response!

I tried this. But the c.isOpen() function is not even getting called and the alert in line no 2 is not getting printed.

Just confused if I should change some syntax in HTML so the function gets called.

<table ng-if="data.items.length" class="grid-table"  class="tableContent">
  <thead>
          <tr>
    <th>Action</th>
            <th ng-repeat="field in ::data.header">{{field}}</th>
  </tr>
        </thead>
<tr ng-repeat="item in data.cases.list">
<td>
<input type='checkbox' id = {{item.check}} name = {{item.check}} checklist-model="test" checklist-value='' ng-click="c.selectedList(item)" disabled= "c.isOpen({{::item.state}})"/>
    </td>
 <td role="cell" ng-repeat="field in ::data.row">{{item[field]}}</td>
</tr>
</table>

Regards,

Prity