With jQuery and ASP.NET MVC Almost Radio Buttons

The Silicon Valley Code Camp web site used jQuery to do a lot of the page markup manipulation.  Behind the scenes of course is ASP.NET MVC5 which has a lot of helper methods for things like Check Boxes and Radio Buttons.  General purpose methods are nice (until they are not).  I’m building a more sophisticated “Opt-Out” for the code camp site and have created a choice where the user can say they want “All Emails” or “Critical Emails”.  I did not want to have a third choice for “No Emails” since say they don’t want all and they don’t want critical implies they don’t want any.  Also, it does not make sense for the user to say they want both “All” and “Critical”. It’s a one or another, just like radio buttons.

Since I could not use radio buttons to make the behavior correct, I decided to do the validation logic in jQuery.  Here is the short code that takes care of it (along with the ASP.NET MVC5 code for reference).

<script type="text/javascript">
    $(document).ready(function() {
        // these are not quite radio buttons.  want to be able to check them both off if you want,
        // but not allow both to be set.
        $('#EmailReceiveAllYears').change(function () {
            if ($('#EmailSendMinimalEmail').is(':checked')) {
                $('#EmailSendMinimalEmail').prop('checked', false);
            }
        });
        $('#EmailSendMinimalEmail').change(function () {
            if ($('#EmailReceiveAllYears').is(':checked')) {
                $('#EmailReceiveAllYears').prop('checked', false);
            }
        });
    });
</script>

And the ASP.NET MVC5 razor form:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(a => a.RegisterUserInfoLoggedIn.AttendeesId)
&lt;div <span class="kwrd">class</span>=<span class="str">"important"</span>&gt;
    &lt;div <span class="kwrd">class</span>=<span class="str">"checkField"</span>&gt;
        @Html.CheckBoxFor(m =&gt; m.EmailReceiveAllCurrentYear)
        @Html.LabelFor(m =&gt; m.EmailReceiveAllCurrentYear,
            <span class="str">"Receive mailings regarding this years event..."</span>)
      
    &lt;/div&gt;

    &lt;div <span class="kwrd">class</span>=<span class="str">"checkField"</span>&gt;
        @Html.CheckBoxFor(m =&gt; m.EmailReceiveAllYears)
        @Html.LabelFor(m =&gt; m.EmailReceiveAllYears,
            <span class="str">"Receive all mailings regarding ..."</span>)
      
    &lt;/div&gt;

    &lt;div <span class="kwrd">class</span>=<span class="str">"checkField"</span>&gt;
        @Html.CheckBoxFor(m =&gt; m.EmailSendMinimalEmail)
        @Html.LabelFor(m =&gt; m.EmailSendMinimalEmail,
            <span class="str">"Receive ONLY critical email ..."</span>)
    &lt;/div&gt;

    &lt;div <span class="kwrd">class</span>=<span class="str">"checkField"</span>&gt;
        @Html.CheckBoxFor(m =&gt; m.EmailReceiveSponsorEmail)
        @Html.LabelFor(m =&gt; m.EmailReceiveSponsorEmail,
            <span class="str">"Receive emails from our sponsors.  From ..."</span>)  
    &lt;/div&gt;

&lt;/div&gt;
&lt;div&gt;
    &lt;div&gt;
        &lt;input type=<span class="str">"submit"</span> <span class="kwrd">class</span>=<span class="str">"button magenta"</span> 
        <span class="kwrd">value</span>=<span class="str">"Save Changes"</span>  /&gt;
    &lt;/div&gt;
&lt;/div&gt;
}

HTH’s!