如何灰化其他單選按鈕後，選擇一個，直到刷新

希望有人可以提示我進入正確的方向，我想要一個簡單的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） –

如何灰化其他單選按鈕後，選擇一個，直到刷新

回答

相關問題