Question

......但它困扰着我！我有两个复选框，我想停止然后检查。因此，如果我检查一个，则必须取消选中另一个。这可能看起来像一个切换。但是它们都可以不受控制。然而，真正的问题是没有选中Checkbox上的click事件。我不明白为什么，所以我希望你能告诉我。这是View，我在复选框上尝试了点击和更改事件;

<%@ 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>

*添加信息*

页面来源看起来像这样;

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

Answer 1

首先，让我们从一个大问题开始： jQuery未包含在页面中，您需要为此添加<script>块，例如：

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

使用您的控制台查看这样的明显错误，您无疑会得到$未定义的错误。

之后，我认为您需要change，以及属性'checked'，如下所示：

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

You can test it here。如果有更改，则检查来自，在这种情况下应检查任何内容，或者检查它......无论如何都应该取消选中所有其他。

或者，作为一个更通用的解决方案，将它们放在一个容器中，比如说<div class="checkOne">，然后你可以为所有事件做到这一点：

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

You can try that version here

Answer 2

只是看着它，我认为你不应该使用.attr（）命令。

你试过了吗？

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

简单的MVC / JQuery问题

2 个答案: