複選框更改功能只能觸發一次

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> 

ASP.NET碼生成的HTML：

<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 webforms。 但是，如果你添加

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因爲，由於您將Framework &擴展選項設置爲jQuery 1.7.2，因此它包含在$(document).ready(...);語句中。爲了能夠在任何地方工作，您只需自己做同樣的事情：

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