Question

希望有人可以促使我走向正确的方向，我想要一个简单的3单选按钮形式，比方说1,2,3 一旦选择1，我想禁用选项2和3，直到刷新页面所以也许这些选项会变灰并且不可选择

任何帮助表示无法在Google上找到一件事

Answer 1

我们走了， 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>

Answer 2

我们会将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"); 
});

Answer 3

我认为上述问题的所有答案都是正确而准确的，但根据我的说法，如果你是新手，你会觉得这个答案更有用，也更容易理解

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

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

如何在选择一个之后将其他单选按钮变灰，直到刷新

3 个答案: