简单的MVC/JQuery问题

...但它是困扰我！我有2个复选框，我想停止然后两个被检查。所以如果我检查一个，另一个必须没有检查。这可能看起来像一个切换。但是他们都可以没有选中。但是真正的问题是复选框上的点击事件没有被拾取。我不明白为什么，所以我希望你能让我知道。这是视图，其中我已经尝试了复选框上的单击和更改事件;简单的MVC/JQuery问题

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

*增加INFO *

页面的源代码看起来是这样的;

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

来源

2010-11-10 arame3333

呈现的版本是什么样的？ – 2010-11-10 10:22:31

这是一个测试应用程序，试图让这个工作。所以我在我的页面上看到的是一些文本和我想测试的2个复选框。 – arame3333 2010-11-10 10:25:04

为了澄清，呈现的HTML看起来像什么，你可以发布它吗？ - 特别是复选框段落。 – 2010-11-10 10:26:06

首先，让我们先从大问题：不包括在页面上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。

来源

2010-11-10 10:36:14

编写快速测试应用程序的危险！好吧，我已经把JQuery引用，现在事件正在被点击。我在Firebug中发现的是，复选框值不更新，它始终是false。当我查看页面源时，这是真的。我认为问题可能与隐藏的领域，也许我应该使用一个类，如其他地方建议 – arame3333 2010-11-10 11:04:36

@ arame3333 - 您是否正在使用我上面的其他更改，或只是包括jQuery与您当前的代码？ – 2010-11-10 11:09:01

当我使用click而不是改变时，您的代码执行。但它不起作用。我不知道.not（this）.attr（“checked”，false）是如何工作的。这条线在任何情况下都不会被执行。 – arame3333 2010-11-10 11:18:33

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

你试过：

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

来源

2010-11-10 10:33:21 Juggernt

简单的MVC/JQuery问题

回答

相关问题