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

希望有人可以提示我进入正确的方向，我想要一个简单的3单选按钮形式，让我们说一次1已被选中1,2,3 我要禁用选项2和3，直到页面已经被刷新所以也许这些选项会变灰并无法选择如何灰化其他单选按钮后，选择一个，直到刷新

任何帮助赞赏无法找到对谷歌

2016-02-15 Tudor Gibson

jQuery（“＃radiobutonID input：radio”）。attr（'disabled'，true）; – Sinto

在这里，我们走了，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>标签内。

UPDATE： 为了保持刷新页面，你应该修改代码以在此之后：

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

来源

2016-02-15 09:48:13 MDD

请注意OP中没有jQuery标签。 –

我们将在一个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"); 
});

来源

2016-02-15 10:03:33

我认为所有的答案是正确的，精确到你上面的问题，但根据我，如果你是新手

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

这是根据您的需要工作的例子，你会发现这个答案更加有用和理解。欢呼:)

来源

2016-02-15 10:07:09

底部的答案很好，有刷新后保持它的方法吗？ –

你去** localStorage **。但是我认为使用您使用的technology @ backend来保留页面和控件的状态会更有用。 :)（例如：查看状态，会话，cookies） –

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

回答

相关问题