CODEWITHSUNDEEP
jqueryasp.net-mvc
arame3333
arame3333

Reputation: 10193

Simple MVC/JQuery problem

... 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>

Upvotes: 0

Views: 225

Answers (2)

Nick Craver
Nick Craver

Reputation: 630349

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.

Upvotes: 2

Juggernt
Juggernt

Reputation: 31

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

Have you tried:

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

Upvotes: 0

Related Questions