表單單選按鈕禁用/啓用組

Question

我有一個表單，我正在建立一個客戶端，我試圖做到這一點，當一組單選按鈕被選中時，禁用複選框列表，但如果單選按鈕複選框被選中，然後清除其他單選按鈕，如果他們被選中。

這裏是我使用的代碼：

<form action="#"> 
<fieldset><legend>Activities</legend> 
    <input style="margin-right:0; margin-left:0;" type="radio" id="Golf" value="I would like to golf at The Breakers Ocean Course" name="activity" /> 
    <label for="Golf">Golf - The Breakers Ocean Course</label> 
    <ul style="margin-top:0;"> 
     <label for="club">Club Rental</label> 
     <input style="margin-right:0; margin-left:0;" type="radio" id="club-yes" value="Yes" name="clubrental" /> 
     <label for="club-yes">Yes</label> 
     or 
     <input style="margin-right:0; margin-left:0;" type="radio" id="club-no" value="No" name="clubrental" /> 
     <label for="club-no">No</label><br> 

     <input style="margin-right:0; margin-left:0;" type="radio" id="right-hand" value="Right Handed" name="clubhand" /> 
     <label for="right-hand">Right Handed</label> 
     or 
     <input style="margin-right:0; margin-left:0;" type="radio" id="left-hand" value="Left Handed" name="clubhand" /> 
     <label for="left-hand">Left Handed</label> 
    </ul> 
<div style="clear:both;">&nbsp;</div> 
    <input style="margin-right:0; margin-left:0;" type="radio" id="hometour" value="I would like to take the Home tour and Worth Avenue Shopping" name="activity" /> 
    <label for="hometour">Home tour and Worth Avenue Shopping</label> 
<div style="clear:both;">&nbsp;</div> 
    <input style="margin-right:0; margin-left:0;" type="radio" id="museum" value="I would like to attend the Cars of Dreams Museum Tour" name="activity" /> 
    <label for="museum">Cars of Dreams Museum Tour</label> 
<div style="clear:both;">&nbsp;</div> 
    <input style="margin-right:0; margin-left:0;" type="radio" id="spa" value="I would like to attend The Spa at the Breakers" name="activity" /> 
    <label for="spa">Spa - The Spa at the Breakers</label> 
     <ul style="margin-top:5px;"> 
      - Please select two treatments<br> 
      <div style="float:left; width:220px; margin-right:15px;"> 
      <input type="checkbox" id="personal-retreat-massage" value="Personal Retreat Massage" name="treatment" onclick="setItems(this)"> 
      <label for="personal-retreat-massage">Personal Retreat Massage</label> 
      </div> 
      <div style="float:left; width:220px; margin-right:15px;"> 
      <input type="checkbox" id="simplicity-massage" value="Simplicity Massage" name="treatment" onclick="setItems(this)"> 
      <label for="simplicity-massage">Simplicity Massage</label> 
      </div> 
      <div style="float:left; width:220px; margin-right:15px;"> 
      <input type="checkbox" id="guerlain-classic-facial" value="Guerlain Classic Facial" name="treatment" onclick="setItems(this)"> 
      <label for="guerlain-classic-facial">Guerlain Classic Facial</label> 
      </div> 
      <div style="float:left; width:220px; margin-right:15px;"> 
      <input type="checkbox" id="cellular-enzyme-peel" value="Cellular Enzyme Peel" name="treatment" onclick="setItems(this)"> 
      <label for="cellular-enzyme-peel">Cellular Enzyme Peel</label> 
      </div> 
     </ul> 
</fieldset> 
    <center><input style="width:75px; height:25px; margin-bottom:25px;" type="submit" value="Submit" name="submit"></center> 
</form 

> 我不能使用PHP所以這隻能是使用Javascript。

謝謝。

Answer 1

您可能會嘗試在未選中spa單選按鈕時禁用複選框，並在選中時啓用它們。您可以檢查無線電元件的焦點狀態。我認爲像下面這樣的東西應該適合你：

$('[type="radio"]').focus(function(){ 
    if ($('#spa').prop('checked')) {// jQuery 1.7.2 
     $('[type="checkbox"]').removeAttr('disabled'); 
    } else { 
     $('[type="checkbox"]').attr('disabled', 'disabled'); 
    } 
}) 

希望它有幫助！

你應該看看jQuery文檔！他們非常有幫助！

http://api.jquery.com/

一些事情，可能會在目前的情況下幫助有：

http://api.jquery.com/attr/

http://api.jquery.com/removeAttr/

http://api.jquery.com/focus/

http://api.jquery.com/blur/

http://api.jquery.com/category/selectors/