gpt4 book ai didi

jquery - 复选框上的 react 仅有效一次。怎么了?

转载 作者:行者123 更新时间:2023-12-01 04:32:05 25 4
gpt4 key购买 nike

我正在制作一个表单,其中复选框控制带有此复选框的行中单选按钮的 View 。问题是它只能运行一次。

请指出可能出现的问题。

页面代码如下:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("label input:checkbox:not(:checked)")
.parent().parent().parent()
.find(":radio")
.attr('checked',false)
.attr('disabled',true);

$("label input:checkbox:not(:checked)").click(function(){
$(this).parent().parent().parent()
.find(":radio")
.attr('disabled',false);
return true;
})

$("label input:checkbox:checked").click(function(){
$(this).parent().parent().parent()
.find(":radio")
.attr('checked',false)
.attr('disabled',true);
return true;
})

$("#clear-first").click(function(){
$("input[name='first']").attr('checked',false);
})

$("#clear-second").click(function(){
$("input[name='second']").attr('checked',false);
})
});

</script>

</head>
<body>
<form>
<table id="filters-select">
<thead>
<tr>
<td>filter name</td>
<td>first filter</td>
<td>second filter</td>
</tr>
</thead>
<tbody>
<tr>
<td><label><input type="checkbox" name="first-check" checked="checked" class="filter-checkbox">first row</label></td>
<td><label><input type="radio" name="first" value="1">value 1 col 1</label></td>
<td><label><input type="radio" name="second" value="1">value 1 col 2</label></td>
</tr><tr>
<td><label><input type="checkbox" name="second-check" class="filter-checkbox">second row</label></td>
<td><label><input type="radio" name="first" value="2">value 2 col 1</label></td>
<td><label><input type="radio" name="second" value="2">value 2 col 2</label></td>
</tr><tr>
<td><label><input type="checkbox" name="third-check" class="filter-checkbox">third row</label></td>
<td><label><input type="radio" name="first" value="3">value 3 col 1</label></td>
<td><label><input type="radio" name="second" value="3">value 3 col 2</label></td>
</tr>
<tr>
<td></td>
<td><a id="clear-first">clear</a></td>
<td><a id="clear-second">clear</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

最佳答案

您的复选框只需要一个单击处理程序,在该处理程序中您可以测试单击的复选框是否已选中或未选中,并采取相应的操作。这应该可以解决您的问题(经过测试):

$(document).ready(function(){
$("label input:checkbox:not(:checked)")
.parents('tr')
.find(':radio')
.attr('checked',false)
.attr('disabled',true);

$("label input:checkbox").click(function(){
var $radio = $(this).parents('tr')
.find(':radio');
if($(this).is(':checked')) {
$radio.removeAttr('disabled');
} else {
$radio.attr('disabled',true);
}
return true;
});

$("#clear-first").click(function(){
$("input[name='first']").attr('checked',false);
})

$("#clear-second").click(function(){
$("input[name='second']").attr('checked',false);
})
});

另外,我通过替换它来缩短它:

.parent().parent().parent()
.find(":radio")

这样:

.parents('tr').find(':radio')

关于jquery - 复选框上的 react 仅有效一次。怎么了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1367034/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com