如何在选择其他单选按钮后将其灰显，直到刷新

How to grey out other radio buttons after one is selected until refresh

本文关键字：刷新 选择 其他 单选按钮      更新时间：2023-09-26

希望有人能提示我进入正确的方向，我想要一个简单的 3 单选按钮形式，比如说 1,2,3选择1后，我想禁用选项2和3，直到刷新页面所以也许这些选项会变灰并且无法选择

任何帮助赞赏在谷歌上找不到任何东西

我们将单

选按钮分组到div 中：

<div class="readioBtnDiv">
    <input type="radio" name="group1" value="1" />1
</div>
<div class="readioBtnDiv">
    <input type="radio" name="group2" value="1" />2
</div>
<div class="readioBtnDiv">
    <input type="radio" name="group3" value="1" />3
</div>

现在，我们将在选择另一个单选按钮时禁用另一个单选按钮：

$("input:radio").click(function() {
    var $this = $(this);
    var value = $this.val();
    $this.closest('.readioBtnDiv') 
        .siblings('.readioBtnDiv') 
        .find('input:radio[value="' + value + '"]') 
        .attr("disabled","disabled"); 
});

我们来了，jQuery 方式：

.HTML： 

<form>
  <input type="radio" value="1"> 1
  <input type="radio" value="2"> 2
  <input type="radio" value="3"> 3
</form>

.JS：

<script>
  $('input').on('click', function() {
    $(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
  })
</script>

要将jQuery添加到您的项目中 - 只需插入 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

在您的<head> </head>标签内。

更新：要在页面刷新后保留它，您应该将代码修改为：

<form>
  <input type="radio" value="1" id="radio1"> 1
  <input type="radio" value="2" id="radio2"> 2
  <input type="radio" value="3" id="radio3"> 3
</form>
<script>
  $('#'+localStorage.selected).trigger('click');
  $('#'+localStorage.selected).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
  $('input').on('click', function() {
    $(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
    localStorage.setItem('selected', $(this).attr('id'));
  })
</script>

我认为所有答案对于您上面的问题都是正确和准确的，但据我说，如果您是新手，您会发现这个答案更有用和易于理解 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    function myFunction1() {
        document.getElementById("radio2").disabled = true;
        document.getElementById("radio3").disabled = true;
    }
    function myFunction2() {
        document.getElementById("radio1").disabled = true;
        document.getElementById("radio3").disabled = true;
    }
    function myFunction3() {
        document.getElementById("radio2").disabled = true;
        document.getElementById("radio1").disabled = true;
    }
</script>
</head>
<body>
<div class="block">
<input onclick="myFunction1();" type="radio" id="radio1" value="Radio1" /><label>Radio1</label>
<input onclick="myFunction2();" type="radio" id="radio2" value="Radio2" /><label>Radio2</label>
<input onclick="myFunction3();" type="radio" id="radio3" value="radio3" /><label>radio3</label>
</div>
</body>
</html>

根据您的需要，这是一个工作示例。干杯:)

相关文章：