asp.net-mvc-3jquery-uirazorradio-buttonjqueryi-ui-buttonset

Unable to apply .buttonset() jQuery method on Razor generated RadioButtons


I'd like to apply buttonset() jQuery method to radioButtons. So I wrote :

<div id="divSomething">
    <input type="radio" id="radio1" name="HasSomething" value="Yes" ><label for="radio1">Yes</label>
    <input type="radio" id="radio2" name="HasSomething" value="No"><label for="radio2">No</label>
    <input type="radio" id="radio3" name="HasSomething" value="Dont mind" checked="checked"><label for="radio3">Don't mind</label>
</div>

<script type="text/javascript">
    $("#divSomething").buttonset();

    $("#divSomething input").change(function () {
        alert(this.value);
    });
</script>

... and this perfectly works !

But this is an ASP.NET MVC3 project, and I'd like to use Razor syntax to generate my radioButtons. So I wrote :

<div id="divSomething">
    @Html.RadioButtonFor(m => m.HasSomething, "Yes", new { @type="radio", @id="radio1"})
    @Html.RadioButtonFor(m => m.HasSomething, "no", new { @type = "radio", @id = "radio2" })
    @Html.RadioButtonFor(m => m.HasSomething, "Dont know", new { @type = "radio", @id = "radio3", @checked = "checked" })
</div>

<script type="text/javascript">
    $("#divSomething input").buttonset();

    $("#divSomething").change(function () {
        alert(this.value);
    });
</script>

... and the buttons are displayed like "normal" radioButtons, not with the "buttonset-style". If I just wrote $("#divSomething").buttonset(); the radioButtons are not even displayed...

The worst is that the generated HTML for radioButtons is the same for both methods, except order of radioButtons parameters (id, value etc...) but it doesn't matter I think.

Is there something so obvious I can't see it ?

Thank you for your help.


Solution

  • Ok, so here is the solution : I had to add labels to generated RadioButtons

    @Html.RadioButtonFor(m => m.HasSomething, "Yes", new { @id="radio1"})
    <label for="radio1">Yes</label>
    @Html.RadioButtonFor(m => m.HasSomething, "No", new { @id = "radio2" })
    <label for="radio2">No</label>
    @Html.RadioButtonFor(m => m.HasSomething, "Dont know", new { @id = "radio3", @checked = "checked" })
    <label for="radio3">Don't know</label>