Search code examples
asp.nethtmlradio-buttonjquery-validation-engine

Radio button in radiogroup not rendering checked when checked="checked"


Got this HTML from an ASP.Net MVC3 (C#) application:

<div class="row-fluid">
   <div class="span4">
      <label for="MailPrefBusi">Business Street</label>
      <input type="radio" checked="checked" class="validate[groupRequired[MailingPreference]] MailingPreference" 
             parent_tab="tab4" id="MailPrefBusi" name="MailingPreference" value="1">
   </div>
   <div class="span4">
      <label for="MailPrefBusiPO">Business PO</label>
      <input type="radio" class="validate[groupRequired[MailingPreference]] MailingPreference" 
             parent_tab="tab4" id="MailPrefBusiPO" name="MailingPreference" value="0" disabled="disabled">
   </div>
   <div class="span4">
      <label for="MailPrefHome">Home</label>
      <input type="radio" class="validate[groupRequired[MailingPreference]] MailingPreference" 
             parent_tab="tab4" id="MailPrefHome" name="MailingPreference" value="2">
   </div>
</div>

But when viewing in browser, FF, IE9, IE8 and Chrome, the MailPrefBusi radio is NOT SHOWING checked.

Here's the code that generates the HTML:

<div class="row-fluid">
    @{
        String busipref = "";
        String popref = "";
        String homepref = "";
        switch (ViewBag.part.MailingPreference)
        {
            case 1:
                busipref = "checked=\"checked\"";
                break;
            case 0:
                popref = "checked=\"checked\"";
                break;
            case 2:
                homepref = "checked=\"checked\"";
                break;
        }
     }
     <div class="span4">
        <label for="MailPrefBusi">Business Street</label>
        <input type="radio" value="1" name="MailingPreference" id="MailPrefBusi" 
               parent_tab="tab4" class="validate[groupRequired[MailingPreference]] MailingPreference" @Html.Raw(busipref) />
     </div>
     <div class="span4">
        <label for="MailPrefBusiPO">Business PO</label>
        <input type="radio" value="0" name="MailingPreference" id="MailPrefBusiPO" 
               parent_tab="tab4" class="validate[groupRequired[MailingPreference]] MailingPreference" @Html.Raw(popref) />
     </div>
     <div class="span4">
        <label for="MailPrefHome">Home</label>
        <input type="radio" value="2" name="MailingPreference" id="MailPrefHome" 
               parent_tab="tab4" class="validate[groupRequired[MailingPreference]] MailingPreference" @Html.Raw(homepref) />
     </div>
 </div>

Also have this jQuery code:

if ($("#BusinessAddress1").val() == "") {
    $("#MailPrefBusi").attr('checked', false);
    $("#MailPrefBusi").attr('disabled', true);
} else {
    $("#MailPrefBusi").attr('disabled', false);
    if ($("#MailPrefBusi").attr('checked')) {
        $("#MailPrefBusi").attr('checked', 'checked');
    }
}
if ($("#HomeAddress1").val() == "") {
    $("#MailPrefHome").attr('checked', false);
    $("#MailPrefHome").attr('disabled', true);
} else {
    $("#MailPrefHome").attr('disabled', false);
    if ($("#MailPrefHome").attr('checked')) {
        $("#MailPrefHome").attr('checked', 'checked');
    }
}
if ($("#POAddress1").val() == "") {
    $("#MailPrefBusiPO").attr('checked', false);
    $("#MailPrefBusiPO").attr('disabled', true);
} else {
    $("#MailPrefBusiPO").attr('disabled', false);
    if ($("#MailPrefBusiPO").attr('checked')) {
        $("#MailPrefBusiPO").attr('checked', 'checked');
    }
}

But still it does not show checked. This is a very crucial part of this form and this radio group MUST have at least one item checked. If the user doesn't see it checked, I am not sure the value gets sent correctly, either because we've had instances where the user's MailingPreference was modified to a value that had an empty address, no good!!

The validation is being done using jQuery ValidationEngine.

I'm not sure exactly what's going on here. I've searched high and low to find answers but come up empty and everything I try has the same result.


Solution

  • I had similar problem not a long time ago. Basically what I ended up with was to put the radiobutton list initialization on the client side and it looked something like this:

    $(function() {
        $('input[name=MailingPreference]:eq('+@(ViewBag.part.MailingPreference)+')').attr('checked', 'checked');
    });