Javascript 如何在选择一个单选按钮后灰显其他单选按钮，直到刷新_Javascript_Forms_Radio

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

javascript forms

Javascript 如何在选择一个单选按钮后灰显其他单选按钮，直到刷新,javascript,forms,radio,Javascript,Forms,Radio,希望有人能帮我找到正确的方向，我想要一个简单的3单选按钮表单，比如说1，2，3 一旦选择了1，我想禁用选项2和3，直到页面刷新因此，这些选项可能会变灰，无法选择任何帮助都无法在谷歌上找到任何东西我们走吧，jQuery-way： HTML: <form> <input type="radio" value="1"> 1 <input type="radio" value="2"> 2 <input type="radio" value="

希望有人能帮我找到正确的方向，我想要一个简单的3单选按钮表单，比如说1，2，3 一旦选择了1，我想禁用选项2和3，直到页面刷新因此，这些选项可能会变灰，无法选择

任何帮助都无法在谷歌上找到任何东西

我们走吧，jQuery-way：

HTML:

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

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


1.
2.
3.

JS:

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

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


$（'input'）。在（'click'，function（）上{
$（this）.parent（）.find（'input:not（：checked'））.attr（“disabled”，“disabled”）；
})

要将jQuery添加到项目中，只需插入

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

在您的

标签内

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

<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>


1.
2.
3.
$（'#'+localStorage.selected）.trigger（'click'）；
$（'#'+localStorage.selected）.parent（）.find（'input:not（：checked）'）.attr（“disabled”，“disabled”）；
$（'input'）。在（'click'，function（）上{
$（this）.parent（）.find（'input:not（：checked'））.attr（“disabled”，“disabled”）；
localStorage.setItem（'selected'，$（this.attr（'id'））；
})

我们将单选按钮分组到一个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>

我认为以上问题的所有答案都是正确和准确的，但根据我的说法，如果你是新手，你会发现这个答案更有用、更容易理解

<!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>


函数myFunction1（）{
document.getElementById（“radio2”）.disabled=true；
document.getElementById（“radio3”）.disabled=true；
}
函数myFunction2（）{
document.getElementById（“radio1”）.disabled=true；
document.getElementById（“radio3”）.disabled=true；
}
函数myFunction3（）{
document.getElementById（“radio2”）.disabled=true；
document.getElementById（“radio1”）.disabled=true；
}
无线电1
无线电2
无线电3

根据您的需要，这是一个有效的示例。干杯：）

jQuery（#radiobutonID输入：radio”）.attr（'disabled'，true）；注意，OP中没有jquery标记。底部答案很好。刷新后有没有办法保存它？您选择localStorage。但我认为使用技术@backend保留页面和控件的状态更有用。：）（示例：视图状态、会话、cookie）