動態禁用和啓用單選按鈕

Question

我正在創建一個簡單的DISC配置文件測試，其中每個問題都有8個單選按鈕，如果我檢查了大「M」單選按鈕，大「L」單選按鈕將被禁用，不能被選擇，你必須選擇其他類似Overpowered，Kind或Brave。形式看起來像這樣，

我試圖用jQuery，

$(document).ready(function(e) { 
    var Form = $("[name=DISC]"); 

    Form.find("input.Most").each(function() { 
     $(this).change(function() { 
      $(this).next().attr("disabled", "disabled"); 
      $(this).prev().attr("disabled"); 
     }); 
    }); 

    Form.find("input.Least").each(function() { 
     $(this).change(function() { 
      $(this).prev().attr("disabled","disabled"); 
      $(this).next().attr("disabled"); 
     }); 
    }); 
}); 

但是，如果我檢查的大「M」單選按鈕，後來我把它變成了制服大「L」單選按鈕仍然被禁用，所以與其他的「L」按鈕，如果我以後更改「L」按鈕，在「M」依然是禁用的，看起來像這樣，

我想得到的結果是，如果我選擇M作爲種類，我不能選擇L作爲種類。任何幫助？對不起，英文不好。 :)

Answer 1

創建兩組按鈕（即給按鈕屬性相同的name），並且默認行爲是每次只能檢查每個組中的一個按鈕。

<div class="lgroup"> 
<input type="radio" name="Lgroup" value="1"> //great 
<input type="radio" name="Lgroup" value="2"> //overpowered 
<input type="radio" name="Lgroup" value="3"> // kind 
<input type="radio" name="Lgroup" value="4"> //brave 
</div> 
<div class="mgroup"> 
<input type="radio" name="Mgroup" value="1"> //great 
<input type="radio" name="Mgroup" value="2"> //overpowered 
<input type="radio" name="Mgroup" value="3"> //kind 
<input type="radio" name="Mgroup" value="4"> //brave 
</div> 

禁止相同的屬性被標記爲L和M，可以使用下面的腳本：

$("input").change(
    function(){ 
     i= $(this).index(); 
     sibling = $(this) 
     .parent() 
     .siblings() 
     .find("input") 
     .eq(i); 
    if (sibling.is(":checked")) 
     $(this).removeAttr("checked"); 
     } 
); 

FIDDLE

Answer 2

那麼作爲一個回答你的問題，我只是嘗試這樣做小提琴：http://jsfiddle.net/KXbEE/

使用的HTML：

<form name='DISC' method='post'> 
    <table> 
    <tbody> 
     <tr> 
      <td> 
       <input type='radio' name='' value='' /> 
       <input type='radio' name='' value='' /> 
      </td> 
      <td>Great</td> 
     </tr> 
     <tr> 
      <td> 
       <input type='radio' name='' value='' /> 
       <input type='radio' name='' value='' /> 
      </td> 
      <td>Overpowered</td> 
     </tr> 
     <tr> 
      <td> 
       <input type='radio' name='' value='' /> 
       <input type='radio' name='' value='' /> 
      </td> 
      <td>Kind</td> 
     </tr> 
     <tr> 
      <td> 
       <input type='radio' name='' value='' /> 
       <input type='radio' name='' value='' /> 
      </td> 
      <td>Brave</td> 
     </tr> 
    </tbody> 
    </table> 
</form> 

這jQuery的：

var Form = $("form[name='DISC']"); 

Form.find(":radio").each(function() { 
    $(this).change(function() { 
     $(this).siblings(':radio').attr("disabled", "disabled"); 
    }); 
}); 

檢查了這一點，如果這可以幫助你。