不可否认但是试图提高我的jQuery技能并努力解决这个问题。我有一些从asp.net转发器生成的复选框,我试图强制执行一次只检查其中一个复选框。我可以在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>
答案 0 :(得分: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"/>
$('.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>
答案 1 :(得分:0)
在空白的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>
答案 2 :(得分:0)
你的代码适用于JFiddle,因为你设置了Framework&amp; jQuery 1.7.2
的扩展选项,它包含在$(document).ready(...);
语句中。为了能够在任何地方工作,你只需要自己做同样的事情:
$(document).ready(function() {
$('.menuBox input[type=checkbox]').change(function () {
$('.menuBox input[type=checkbox]').not(this).prop('checked', false);
});
});