Matthew The Terrible
Matthew The Terrible

Reputation: 1643

asp .net page change background color of label when checkbox is checked

Trying to change the background color of a label for a checkbox when the checkbox is checked. I can do it using this method http://jsfiddle.net/CjpmP/ but I can find figure out how to do it with the @html.checkbox and the label for method I need to use. Here is what I've got

<style type="text/css">
    .checkyoself{
        display: none;
    }

    .checkyoself:checked + .label1{
        background-color: green;
    }

    .label1 {
        width: 240px;
        height: 140px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px;
        color: #ffffff;
        background-color: #9e00f2;
        float: left;
    }
</style>


@{

    var j = 0;
    using (Html.BeginForm("GroceryList", "RecipeIngredient", FormMethod.Post))
    {
        for (int i = 0; i < @Model.RecipeItems.Count; i++)
        {

            var name = "check_" + j;
            @Html.CheckBoxFor(itemModel => itemModel.RecipeItems[i].IsChecked, new { id = @name, @class="checkyoself" })
            <label for=@name class="label1">@Model.RecipeItems[i].Recipe.Title</label>
            @Html.HiddenFor(itemModel => itemModel.RecipeItems[i].Recipe.Title)
            j++;
        }
    }
}

Upvotes: 0

Views: 539

Answers (1)

optimus
optimus

Reputation: 856

Try this fiddle that I made:

.check-with-label:checked + .label-for-check {
  background-color:Red;
    color:white;
    border-style:double;
   }

Just use the border property to engage background color property.

Upvotes: 1

Related Questions