復選框更改功能僅觸發一次

Question

確實很糟糕，但是試圖提高我的jQuery技能，並為此問題苦苦掙扎。 我有一些從asp.net中繼器生成的復選框，我試圖強制僅一次選中這些復選框之一。 我可以在jsFiddle上進行此操作，但不能在我的解決方案中使用，任何人都看不到任何錯誤的內容嗎？

的jsfiddle

jQuery的：

$(document).ready(function () {
     $('.menuBox input[type=checkbox]').change(function () {
        $('.menuBox input[type=checkbox]').not(this).prop('checked', false);
    });
});

HTML（由asp.net代碼生成）：

<div class="menuBox">
   <div class="col1">
    <ul>
        <li id="ctl00_liCategory" class="liCategory">
            <input id="ctl00_chkCategory" type="checkbox" name="ctl00$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'ctl00$chkCategory\',\'\')', 0)" />
            <label for="ctl00_chkCategory" id="ctl00_lblCategory">first label</label>
        </li>
        <li id="ctl01_liCategory" class="liCategory">
            <input id="ctl01_chkCategory" type="checkbox" name="ctl01$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'ctl01$chkCategory\',\'\')', 0)" />
            <label for="ctl01_chkCategory" id="ctl01_lblCategory">second label</label>
        </li>
        <li id="ctl02_liCategory" class="liCategory">
            <input id="ctl02_chkCategory" type="checkbox" name="ctl02$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'ctl02$chkCategory\',\'\')', 0)" />
            <label for="ctl02_chkCategory" id="ctl02_lblCategory">third label</label>
        </li>
    </ul>
   </div>    
</div>

生成html的ASP.NET代碼：

<div class="col1">
   <ul>
      <asp:Repeater runat="server" ID="rptrCategoriesCol1"    OnItemDataBound="rptrCategories_ItemDataBound">
         <ItemTemplate>
            <li runat="server" id="liCategory" class="liCategory">
               <asp:Checkbox runat="server" ID="chkCategory" AutoPostBack="true" OnCheckedChanged="FilterResults" CssClass="CategoryChkBox" />
               <asp:Label runat="server" ID="lblCategory" AssociatedControlID="chkCategory" />
            </li>
         </ItemTemplate>
      </asp:Repeater> 
   </ul>
</div>

Answer 1

如果使用中繼器，為什么不使用一組單選按鈕，因為默認情況下只能選中一個。

您唯一需要做的就是所有輸入都具有相同的名稱

<input type="radio" name="list1" value="1"/>
<input type="radio" name="list1" value="2"/>
<input type="radio" name="list1" value="3"/>
<input type="radio" name="list1" value="4" />
<input type="radio" name="list1" value="5"/>

http://jsfiddle.net/314jm9oc/

$('.cbox').click(function() {
    $('.cbox').prop("checked",false);
    $(this).prop("checked",true);
});

是復選框問題的簡單版本，如果您堅持使用復選框的

$('.menuBox input[type=checkbox]').attr('onclick','');
$('.menuBox input[type=checkbox]').click(function() {   
   $('.menuBox input[type=checkbox]').prop("checked",false);
    $(this).prop("checked",true);
});

將適合您提供的示例。

一段時間未使用.net網絡表單。 但是，如果您添加

OnClick="JavaScript:EnableDisable(this);"

到您的復選框

<script type="text/javascript">
function EnableDisable(ele) {
   $('.menuBox input[type=checkbox]').each(function() {
     $(this).prop("checked",false");
   });
   ele.checked = true;
}
</script>

Answer 2

在空白的html上嘗試此操作，它應該像在jsFiddle中一樣工作

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
$(function(){
  $('.menuBox input[type=checkbox]').change(function () {
    $('.menuBox input[type=checkbox]').not(this).prop('checked', false);
  });
}); 
</script>

<div class="menuBox">
<div class="col1">
<ul>
    <li id="content_0_rptrCategoriesCol1_ctl00_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol1_ctl00_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol1$ctl00$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol1$ctl00$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol1_ctl00_chkCategory" id="content_0_rptrCategoriesCol1_ctl00_lblCategory">first label</label>
    </li>
    <li id="content_0_rptrCategoriesCol1_ctl01_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol1_ctl01_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol1$ctl01$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol1$ctl01$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol1_ctl01_chkCategory" id="content_0_rptrCategoriesCol1_ctl01_lblCategory">second label</label>
    </li>
    <li id="content_0_rptrCategoriesCol1_ctl02_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol1_ctl02_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol1$ctl02$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol1$ctl02$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol1_ctl02_chkCategory" id="content_0_rptrCategoriesCol1_ctl02_lblCategory">third label</label>
    </li>
</ul>
</div>
<div class="col2">
<ul>
    <li id="content_0_rptrCategoriesCol2_ctl00_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol2_ctl00_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol2$ctl00$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol2$ctl00$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol2_ctl00_chkCategory" id="content_0_rptrCategoriesCol2_ctl00_lblCategory">fourth label</label>
    </li>
    <li id="content_0_rptrCategoriesCol2_ctl01_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol2_ctl01_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol2$ctl01$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol2$ctl01$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol2_ctl01_chkCategory" id="content_0_rptrCategoriesCol2_ctl01_lblCategory">fifth label</label>
    </li>
</ul>
</div>
<div class="col3">
<ul>
    <li id="content_0_rptrCategoriesCol3_ctl00_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol3_ctl00_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol3$ctl00$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol3$ctl00$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol3_ctl00_chkCategory" id="content_0_rptrCategoriesCol3_ctl00_lblCategory">sixth label</label>
    </li>
    <li id="content_0_rptrCategoriesCol3_ctl01_liCategory" class="liCategory">
        <input id="content_0_rptrCategoriesCol3_ctl01_chkCategory" type="checkbox" name="content_0$rptrCategoriesCol3$ctl01$chkCategory" onclick="javascript:setTimeout('__doPostBack(\'content_0$rptrCategoriesCol3$ctl01$chkCategory\',\'\')', 0)" />
        <label for="content_0_rptrCategoriesCol3_ctl01_chkCategory" id="content_0_rptrCategoriesCol3_ctl01_lblCategory">seventh label</label>
    </li>
 </ul>
</div>

Answer 3

您的代碼可在JFiddle上運行，因為自從您將jQuery 1.7.2 Framework＆extensions選項設置為以來，它就包含在$(document).ready(...); 聲明。 為了使它可以在任何地方工作，您只需自己做一遍：

$(document).ready(function() {
     $('.menuBox input[type=checkbox]').change(function () {
          $('.menuBox input[type=checkbox]').not(this).prop('checked', false);
     });
});