Simple MVC/JQuery problem

Question

... but it is bothering me! I have 2 checkboxes, and I want to stop then both being checked. So if I check one, the other must be unchecked. This might look like a toggle. However they can both be unchecked. However the real problem is that the click event on the Checkbox is not being picked up. I cannot understand why, so I hope you can let me know. This is the View, of which I have tried both the click and change events on the checkbox;

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage<TestApp.Models.Checkboxes>" %>

<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
    About Us
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#Checkbox1').click(function () {
                if ($('#Checkbox1').is(':checked'))
                    $('#Checkbox2').attr(':checked', false);
            })
        });
    </script>
    <h2>About</h2>
    <p>
        Checkboxes Test
    </p>
    <p>
        <%: Html.CheckBoxFor(model => model.Checkbox1) %>
    </p>
    <p>
        <%: Html.CheckBoxFor(model => model.Checkbox2) %>
    </p>    

</asp:Content>

* ADDED INFO *

The Page Source looks like this;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

    About Us

</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" /></head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>

            </div>

            <div id="logindisplay">

        Welcome <b>Admin</b>!
        [ <a href="/Account/LogOff">Log Off</a> ]

            </div> 

            <div id="menucontainer">

                <ul id="menu">              
                    <li><a href="/">Home</a></li>

                    <li><a href="/Home/About">About</a></li>
                </ul>

            </div>
        </div>

        <div id="main">

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#Checkbox1').click(function () {
                if ($('#Checkbox1').is(':checked'))
                    $('#Checkbox2').attr(':checked', false);
            })
        });
    </script>
    <h2>About</h2>

    <p>
        Checkboxes Test
    </p>
    <p>
        <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /><input name="Checkbox1" type="hidden" value="false" />
    </p>
    <p>
        <input id="Checkbox2" name="Checkbox2" type="checkbox" value="true" /><input name="Checkbox2" type="hidden" value="false" />
    </p>    



            <div id="footer">

            </div>
        </div>
    </div>
</body>
</html>

This is a test app to try and get this to work. So on my page all I see is some text and the 2 checkboxes that I want to test. — arame3333
– arame3333, Commented Nov 10, 2010 at 10:25
To clarify, what does the rendered HTML look like, can you post that? - Specifically the checkbox paragraphs. — Nick Craver
– Nick Craver, Commented Nov 10, 2010 at 10:26
the point @Nick Craver is making is that your assigning the click event based on the ID's, which we cannot see (can only see with the rendered version). Try assigning the checkbox classes and assign the click handlers that way. — RPM1984
– RPM1984, Commented Nov 10, 2010 at 10:27

Nick Craver · Accepted Answer · 2010-11-10 10:42:30Z

2

First, let's start with the big problem: jQuery isn't included on the page, you'll want to add the <script> block for this, for example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>

Use your console to see obvious errors like this, you're undoubtedly getting a $ is not defined error.

After that, I think you want change here, as well as 'checked' for the attribute, like this:

$(document).ready(function () {
  $('#Checkbox1').change(function () {
     $('#Checkbox2').attr('checked', false);
  });
  $('#Checkbox2').change(function () {
     $('#Checkbox1').attr('checked', false);
  });
});

You can test it here. If there was a change, it was from checked in which case none should be checked, or it was to checked...either way all others should be unchecked.

Or, as a more general solution, put them both in a container, say <div class="checkOne"> then you can do this for all occurrences:

$(function() {
  $(".checkOne :checkbox").change(function() {
    $(this).closest(".checkOne").find(":checkbox")
           .not(this).attr("checked", false);
  });
});

You can try that version here.

edited Nov 10, 2010 at 10:42

answered Nov 10, 2010 at 10:36

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

arame3333 Over a year ago

The perils of writing a quick test app! OK I have put in the JQuery reference and now the event is being picked up as click. What I am finding in Firebug is that the checkbox value is not updating, it is always false. When I look at the page source, it is true. I think the problem may be with the hidden field, and maybe I should use a class as suggested elsewhere

Nick Craver Over a year ago

@arame3333 - Are you using my other changes above, or just including jQuery with your current code?

arame3333 Over a year ago

You code executes when I use click rather than change. However it does not work. I am not sure how the .not(this).attr("checked", false) works. This line does not in any case ever get executed.

Nick Craver Over a year ago

@arame3333 - it's a chain of the line above, just wrapped to fit on SO without scrolling...it's all one line.

arame3333 Over a year ago

I have looked around and I notice there is an issue with checkboxes in MVC. It uses a hidden field which you can see in the page source. I think I need to tag this with the MVC community.

|

Juggernt · Accepted Answer · 2010-11-10 10:33:21Z

0

Just looking at it, I don't think you should have the : with the .attr() command.

Have you tried:

$('#Checkbox2').attr('checked', false);

answered Nov 10, 2010 at 10:33

Juggernt

313 bronze badges

Collectives™ on Stack Overflow

Simple MVC/JQuery problem

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related