How to modify jQuery progressbar color in ASP.net gridview?

Question

I have a Gridview with a column that contains progressbar value. I managed to display the progress for each row but I'm looking for a way to alter the color of progress bar based on another column with Boolean value ( True/False ). If value is True color becomes green. If the value is False color becomes Red. I've manged to alter a single progress bar color but I haven't been able to do it in a Gridview for each row! The Boolean column is status and the progressbar value is in progress.

Thanks in Advance!

GridView in ASP:

Updated:

<Columns>
<asp:TemplateField>
    <ItemTemplate>
        <%# Container.DataItemIndex + 1 %>
    </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="progress" HeaderText="Progress" SortExpression="progress" />
<asp:BoundField DataField="status" HeaderText="status" SortExpression="status" />
<asp:TemplateField>
<ItemTemplate>
   <div class="pbcontainer">
      <div class="progressbar"><span><%# Eval("progress") %>%</span></div>
      <div class="value" style="visibility:hidden; height:0; width:0;"> <%#         Eval("progress") %> </div>
      <div class="status" style="visibility:hidden; height:0; width:0;"> <%# Eval("status") %> </div>
  </div>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Script:

UPDATED:

  <script>
    $(function () {

        $('.pbcontainer').each(function () {

            var val = parseInt($(".value", this).text());
            var status = $(".status", this).text();

            var progressColor = "Orange";
            var progressBackColor = "lightYellow";
            if (status == "False") {
                progressColor = "Red";
                console.log(progressColor);
            }
            else {
                progressColor = "Green";
                console.log(progressColor);
            }

            $('.progressbar', this).progressbar({ value: val });
            $('.progressbar', this).css({ 'background': progressBackColor });
            $('.progressbar > div', this).css({ 'background': progressColor });
        });
    });
 </script>

Edit: I've updated the code but still the color is always Green! like the If statement is not working ?!

Answer 1

In your snippet the value in hidden field is the same as in the span for progress. So you rather use the same value to and make the decision of coloring.

Updated:

For e.g. you have let say two rows with value true and false

<div class="progressbar"><span>70%</span></div>
<div class="progressbar"><span>20%</span></div>
<div class="status" style="visibility:hidden; height:0; width:0;">true</div>
<div class="status" style="visibility:hidden; height:0; width:0;">false</div>

Now you can read the value in each item and color them accordingly.

   var progressColorRed = "Red";
    var progressColorGreen = "Green";
    var progressBackColor = "lightYellow";
    var progressLate = true;

 $('.progressbar').each(function(index, item) {
        var progressValue = $(".status").eq(index).text();
        console.log(progressValue);
        if(progressValue == "true")
        {
            $(item).css({ 'background': progressBackColor });
            $(item).css({ 'background': progressColorGreen });
        }
        else
        {
            $(item).css({ 'background': progressBackColor });
            $(item).css({ 'background': progressColorRed });
        }
 });

Here' the fiddle demo of the same