Being driven crazy again and could really use some help if somebody can hit me with the smart stick!
I am trying to do something different, but trying to reuse the principles discussed above.
I have a number that is being calculated and displayed. I think it would be nice to style the background differently depending on the value.
If the value is greater than zero, light green, zero, light blue, less than zero light red. Just so that the user can see at a glance whether they have a bonus or a penalty for that action.
As can be seen in the fragment below, first I have an input field where I get one of the numbers used to calculate the field I want styled.
The next 3 fields normally have "display:none;" but I took them out so I could see what was going on better.
First I have the calculated field attr_Adjust-TN-Total-calc. This is marshaling the number I want to work with.
Then I have two more calculated values - The one calculated value will have a zero value if the value of @{Adjust-TN-Total-calc} is zero or less, the other has a zero value if it is zero or more.
Then I have two checkboxes that have the exact same name as the last two calculated values.
My thought was that the checkboxes that have the same names would then be automatically checked or unchecked depending on those values (as discussed above).
Lastly I have the field I want displayed and styled.
<div class="sheet-table-row">
<span class="sheet-table-data sheet-center sheet-label"><input style="width:3em;" title="@{Adjust-TN-Misc}: Enter any Misc Adjustments to all Target Numbers here." type="number" name="attr_Adjust-TN-Misc" value="0"></span>
<input type="number" name="attr_Adjust-TN-Total-calc" title="@{Adjust-TN-Total-calc}" value="0 + @{Adjust-TN-Misc} - abs(@{combatOption-Reserved})" disabled>
<input type="number" name="attr_Adjust-TN-Total-Minus" title="@{Adjust-TN-Total-Minus}" value="(@{Adjust-TN-Total-calc} - abs(@{Adjust-TN-Total-calc} )) / 2" disabled>
<input type="number" name="attr_Adjust-TN-Total-Plus" title="@{Adjust-TN-Total-Plus}" value="(@{Adjust-TN-Total-calc} + abs(@{Adjust-TN-Total-calc} )) / 2" disabled>
<input class="sheet-MinusTest" type="checkbox" name="attr_Adjust-TN-Total-Minus" style="display:none;" value='1' checked />
<input class="sheet-PlusTest" type="checkbox" name="attr_Adjust-TN-Total-Plus" style="display:none;" value='1' checked />
<div class="sheet-table-data sheet-center sheet-label sheet-Minus-Plus">
<input name="attr_Adjust-TN-Total" title="@{Adjust-TN-Total} This is the total adjustment to all target numbers from Delayed Actions and Misc Adjustments." type="number" value="@{Adjust-TN-Total-calc}" disabled>
</div> Target Number
</div>
So I have a problem.
The checkboxes are not changing their "checked" status when the linked calculated field (that has the same name as them) changes.
This technique seems to work fine in the solutions provided in this thread a few weeks ago, but it is not working at all as I have it now. I have tried every combination of value, checked, disabled, and display:none I can think of but, it does not work.
Looking at the element in Chrome developer tools, if I have "checked" in the definition (as I do above), then it is always checked. Otherwise it is always unchecked. My understanding is that when the field that has the exact same name has a non-zero value, the checkbox should check itself and uncheck itself when the value changes to zero.
What am I doing wrong there?
the CSS seems to be working fine when I do have the checkboxes displayed and I manually set the checks.
.sheet-Minus-Plus input[type="number"]:disabled {
background-color: #F0F0FF;
}
.sheet-Minus-Test:checked ~ .sheet-Minus-Plus input[type="number"]:disabled {
background-color: #FFE0E0;
}
.sheet-Plus-Test:checked ~ .sheet-Minus-Plus input[type="number"]:disabled {
background-color: #E0FFE0;
}
So it looks like the only problem is that I can't get the checkboxes to autocalculte.
Any help would be most appreciated.
