使用 js 啟用和禁用單選按鈕
[英]Enabling and Disabling Radio Buttons with js
問題描述
幫助，我正在制作一些單選按鈕以插入我的數據庫，但所選值規則可能不會被選擇兩次，我有 js 代碼但它不能以最佳方式工作，問題是如果我選擇了 1在價格上。 然后我在遠處選擇了 2，然后在第二列之后禁用，而第一列中的禁用消失。`
<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('input:radio').click(function() {
$('input:radio').removeAttr('disabled');
if($(this).is(':checked')) {
var val = $(this).val();
$('input:radio').each(function() {
if(val == $(this).val()) {
$(this).attr('disabled',true);
}
});
$(this).removeAttr('disabled');
}
});
});
</script>
<body>
<form class="" action="" method="post">
<table class="table borderless">
<tr>
<th>#</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>Price</th>
<th><input type="radio" name="price" value="1"></th>
<th><input type="radio" name="price" value="2"></th>
<th><input type="radio" name="price" value="3"></th>
<th><input type="radio" name="price" value="4"></th>
<th><input type="radio" name="price" value="5"></th>
</tr>
<tr>
<th>distance</th>
<th><input type="radio" name="distance" value="1"></th>
<th><input type="radio" name="distance" value="2"></th>
<th><input type="radio" name="distance" value="3"></th>
<th><input type="radio" name="distance" value="4"></th>
<th><input type="radio" name="distance" value="5"></th>
</tr>
<tr>
<th>facilities</th>
<th><input type="radio" name="facilities" value="1"></th>
<th><input type="radio" name="facilities" value="2"></th>
<th><input type="radio" name="facilities" value="3"></th>
<th><input type="radio" name="facilities" value="4"></th>
<th><input type="radio" name="facilities" value="5"></th>
</tr>
<tr>
<th>large</th>
<th><input type="radio" name="large" value="1"></th>
<th><input type="radio" name="large" value="2"></th>
<th><input type="radio" name="large" value="3"></th>
<th><input type="radio" name="large" value="4"></th>
<th><input type="radio" name="large" value="5"></th>
</tr>
</table>
<button type="sumbit" name="submit">Submit</button>
</form>
</body>
</html>```
[enter image description here][1]`
[1]: https://i.stack.imgur.com/6QI93.png
3 個解決方案
解決方案1
2 已采納 2019-10-08 20:22:57
這是你想要達到的目標嗎？ https://jsfiddle.net/4ayLkm6h/1/
我所做的是創建一個變量來跟蹤以前的值是什么：
const values = {};
我在點擊處理程序中使用它來檢查“此列的值是否已更改？”，如果已更改，則重新啟用該列的所有復選框（例如 value=1）：
if (values[name]) {
$('input:radio[value="' + values[name] + '"]').attr('disabled', false);
}
然后我更新下一次的值：
values[name] = val;
最后我禁用當前列中的那些：
$('input:radio[value="' + val + '"]:not(:checked)').attr('disabled', true);
第一次單擊檢查時：
if (values[name]) {
將是錯誤的，所以我不會重新啟用任何東西（因為尚未禁用任何內容），所以此代碼僅在第二次單擊時相關，以檢查我們是否需要在禁用當前單擊之前重新啟用上一列柱子。
解決方案2
1 2019-10-08 20:27:05
我將您的 JS 編輯為：
$(document).ready(function() {
$('input:radio').click(function(){
var btnGroup = "input:radio[value='" + $(this).attr('value') + "']";
var btnNameGroup = "input:radio[name='" + $(this).attr('name') + "']";
$(btnGroup).attr('disabled',true);
$(btnNameGroup).attr('disabled',true);
});
});
這會將每個無線電與其對應的名稱和值分組，並且您只能在每行和每列中每個 select 一個。 這樣做時，禁用屬性不會在選擇另一個單選按鈕后離開組。 由於您沒有 state 如果您想在第一次單擊后再次啟用單選按鈕行，我在用戶第一次選擇某些內容后將它們全部禁用。 至少我是這樣理解你的問題的。
這是我所描述的jsfiddle，也許這就是你要找的： https://jsfiddle.net/x1c6mpgL/
解決方案3
0 2019-10-08 21:38:11
這是一些簡短而“神秘”的東西，使用 ES6 function 語法。
首先，我從所有單選按鈕名稱中創建一個具有相似值選項的數組rbv 。 該數組包含 5 個 jquery 對象，每個對象的長度 = 4。
然后，在單選按鈕的單擊處理程序中，我循環遍歷該數組並檢查每列rv.filter(':checked').length中已檢查元素的數量。 如果它>0 ，我將整列的 'disable' 屬性設置為true ，否則設置為false 。
$(function(){ var rb =$('input:radio'), // jquery object with all radio buttons rbv=$.makeArray($('[name=price]')) // array of jquery objects, one for each column.map(p=>rb.filter((i,r)=>r.value===p.value)); // click-event: check each column for number of checked elements and act accordingly rb.click(()=>rbv.forEach(rv=>rv.attr('disabled',rv.filter(':checked').length>0))); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="" action="" method="post"> <table class="table borderless"> <tr> <th>#</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> <tr> <th>Price</th> <th><input type="radio" name="price" value="1"></th> <th><input type="radio" name="price" value="2"></th> <th><input type="radio" name="price" value="3"></th> <th><input type="radio" name="price" value="4"></th> <th><input type="radio" name="price" value="5"></th> </tr> <tr> <th>distance</th> <th><input type="radio" name="distance" value="1"></th> <th><input type="radio" name="distance" value="2"></th> <th><input type="radio" name="distance" value="3"></th> <th><input type="radio" name="distance" value="4"></th> <th><input type="radio" name="distance" value="5"></th> </tr> <tr> <th>facilities</th> <th><input type="radio" name="facilities" value="1"></th> <th><input type="radio" name="facilities" value="2"></th> <th><input type="radio" name="facilities" value="3"></th> <th><input type="radio" name="facilities" value="4"></th> <th><input type="radio" name="facilities" value="5"></th> </tr> <tr> <th>large</th> <th><input type="radio" name="large" value="1"></th> <th><input type="radio" name="large" value="2"></th> <th><input type="radio" name="large" value="3"></th> <th><input type="radio" name="large" value="4"></th> <th><input type="radio" name="large" value="5"></th> </tr> </table> <button type="sumbit" name="submit">Submit</button> </form>
禁用和啟用單選按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.