簡單的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問題

回答

相關問題