gpt4 book ai didi

javascript - 使用 js 启用和禁用单选按钮

转载 作者:行者123 更新时间:2023-11-30 10:59:49 25 4
gpt4 key购买 nike

救命啊!我正在制作一些单选按钮以插入到我的数据库中,但选择的值规则可能不会被选择两次,我有 js 代码但它不能最佳工作,问题是如果我在价格中选择 1 ,然后我在 distace 中选择 2,然后在第二列之后禁用,而第一列中的禁用消失。`

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('input:radio').click(function() {

$('input:radio').removeAttr('disabled');
if($(this).is(':checked')) {
var val = $(this).val();

$('input:radio').each(function() {
if(val == $(this).val()) {
$(this).attr('disabled',true);
}
});

$(this).removeAttr('disabled');
}
});
});
</script>
<body>

<form class="" action="" method="post">


<table class="table borderless">
<tr>
<th>#</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>Price</th>
<th><input type="radio" name="price" value="1"></th>
<th><input type="radio" name="price" value="2"></th>
<th><input type="radio" name="price" value="3"></th>
<th><input type="radio" name="price" value="4"></th>
<th><input type="radio" name="price" value="5"></th>
</tr>
<tr>
<th>distance</th>
<th><input type="radio" name="distance" value="1"></th>
<th><input type="radio" name="distance" value="2"></th>
<th><input type="radio" name="distance" value="3"></th>
<th><input type="radio" name="distance" value="4"></th>
<th><input type="radio" name="distance" value="5"></th>
</tr>
<tr>
<th>facilities</th>
<th><input type="radio" name="facilities" value="1"></th>
<th><input type="radio" name="facilities" value="2"></th>
<th><input type="radio" name="facilities" value="3"></th>
<th><input type="radio" name="facilities" value="4"></th>
<th><input type="radio" name="facilities" value="5"></th>
</tr>
<tr>
<th>large</th>
<th><input type="radio" name="large" value="1"></th>
<th><input type="radio" name="large" value="2"></th>
<th><input type="radio" name="large" value="3"></th>
<th><input type="radio" name="large" value="4"></th>
<th><input type="radio" name="large" value="5"></th>
</tr>
</table>
<button type="sumbit" name="submit">Submit</button>
</form>

</body>
</html>```
[enter image description here][1]`


[1]: /image/6QI93.png

最佳答案

这是您要实现的目标吗? https://jsfiddle.net/4ayLkm6h/1/

我所做的是创建一个变量来跟踪之前的值:

  const values = {};

我在点击处理程序中使用它来检查“此列的值是否已更改?”,如果已更改,则重新启用该列的所有复选框(例如值=1):

  if (values[name]) {
$('input:radio[value="' + values[name] + '"]').attr('disabled', false);
}

然后我下次更新值:

  values[name] = val;

最后我禁用了当前列中的那些:

$('input:radio[value="' + val + '"]:not(:checked)').attr('disabled', true);

第一次点击勾选:

if (values[name]) {

将是错误的,所以我不会重新启用任何东西(因为还没有禁用任何东西),所以这段代码只与第二次点击相关,以检查我们是否需要在禁用之前重新启用上一列当前点击的列。

关于javascript - 使用 js 启用和禁用单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58293146/

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