CODEWITHSUNDEEP
javascriptjquerycssasp.net-mvcrazor
Chris Hammond
Chris Hammond

Reputation: 2186

MVC / Bootstrap - Radio Button in group not selecting on initialisation

I have an edit form in my MVC application that has a Traffic Light Status.

When the form is initially opened, the check mark on the "lights" always set to "green" despite jQuery code to set otherwise.

All the code is firing, but it just does not set the initial state.

In this simplified example, if the Model's AlertLevel is set to "Red", the "tick" is still on the "green"

Markup

@Html.HiddenFor(model => model.AlertLevel)
<span class="btn-group RAGStatus" data-toggle="buttons">
    <label class="btn btn-success active " style="width:50px; height: 30px">
        <input type="radio" name="ragStatus" id="ragButton_Green" autocomplete="off" value="Green">
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-warning" style="width:50px; height: 30px">
        <input type="radio" name="ragStatus" id="ragButton_Amber" autocomplete="off" value="Amber">
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-danger" style="width:50px; height: 30px">
        <input type="radio" name="ragStatus" id="ragButton_Red" autocomplete="off" value="Red">
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
</span>

jQuery

$(function () {
    var status = $("#AlertLevel").val();
    $('#ragButton_' + status).prop("checked", true);
})

Model

public class DeptStatus
{
    public string AlertLevel { get; set; }
}

CSS (for the glyph icon display)

.RAGStatus .checked {
    display: none;
}

.RAGStatus .active .checked {
    display: inline-block;
}

.RAGStatus .active .unchecked {
    display: none;
}

Update

In a follow on jQuery function (removed from example), if I do var ragStatus = $('input[name=ragStatus]:checked').val(); then it returns "Red"

Upvotes: 3

Views: 1083

Answers (3)

Nikush Jorjoliani
Nikush Jorjoliani

Reputation: 93

What if you add:

$('#ragButton_' + status).attr('checked', 'checked);

It might have some problems with prop function due to version of jQuery.

Upvotes: 0

BenG
BenG

Reputation: 15164

Looks like bootstrap adds a active class to the container.

try

$(function () {
    var status = $("#AlertLevel").val();
    $('#ragButton_' + status).trigger('click');
})

Upvotes: 1

Gareth
Gareth

Reputation: 5243

You shouldn't need to rely on jQuery to select the initial value of the button group as razor will be able to do this for you, so in your case:

<span class="btn-group RAGStatus" data-toggle="buttons">
    <label class="btn btn-success active " style="width:50px; height: 30px">
        @Html.RadioButtonFor(m => m.AlertLevel, "Green", new { autocomplete = "off" })
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-warning" style="width:50px; height: 30px">
        @Html.RadioButtonFor(m => m.AlertLevel, "Amber", new { autocomplete = "off" })
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-danger" style="width:50px; height: 30px">
        @Html.RadioButtonFor(m => m.AlertLevel, "Red", new { autocomplete = "off" })
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
</span>

Upvotes: 2

Related Questions