只選一個複選框

Question

我想建立一個JavaScript，所以用戶只能選擇下面提到的一個選項。你可以給我一些指針如何做到這一點，因爲我是一個javascript noob。

謝謝！

這是一個菜單

<td><label for="dock_books_search_visible_online"> Visible online?</label></td> 
         <td><input type="checkbox" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" /> </td> 
         <td><label for="dock_books_search_visible_online_yes"> Yes</label></td> 
         <td><input type="checkbox" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> </td> 
         <td><label for="dock_books_search_visible_online_no"> No</label></td> 

Answer 1

對於多個選項中的單個選項，我們使用Radio Buttons而不是CheckBoxes。

你應該使用這樣的東西。

<input type="radio" name="option" value="Yes" id="yes" /> 
<input type="radio" name="option" value="No" id="no" /> 

但是，如果你想圓走另一條路，只需添加下面的腳本在你的腦袋標籤仍然：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(':checkbox').bind('change', function() { 
     var thisClass = $(this).attr('class'); 
     if ($(this).attr('checked')) { 
      $(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked'); 
     } 
     else { 
      $(this).attr('checked', 'checked'); 
     } 
    }); 
}); 
</script> 

這裏是fiddle以上。

希望這會有所幫助。

Answer 2

這看起來像單選按鈕，複選框不工作的部分的畫面。

Answer 3

嗨你爲什麼使用複選框？複選框不適用於您想要的功能。單選按鈕確切地是你想要使用的。

<form> 
<input type="radio" name="sex" value="male" /> Male<br /> 
<input type="radio" name="sex" value="female" /> Female 
</form> 

進一步的細節看here

Answer 4

嘗試使用單選按鈕的，給他們相同的名稱將它們分組，並只允許1供選擇：

<td> 
    <label for="dock_books_search_visible_online"> Visible online?</label> 
</td> 
<td> 
    <input type="radio" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" /> 
</td> 
<td> 
    <label for="dock_books_search_visible_online_yes"> Yes</label> 
</td> 
<td><input type="radio" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> 
</td> 
<td> 
    <label for="dock_books_search_visible_online_no"> No</label> 
</td> 

Check this JSFiddle.

Answer 5

你有一點使用單選按鈕這裏的任何方式是javascript解決方案 我用它在我的項目中，當有搜索標誌RIA和搜索結果中的數據網格由具有13個記錄 阿賈克斯當我檢查一個記錄它會禁用其餘

code for javascript enable disable check boxes jsfiddle

<form name="mainForm" method="GET"> 

    Visible online? 


     <input type="checkbox" name="option" value="checkedVisibleOk" id="option" onclick="changeCheckBox();"/> 

yes 

     <input type="checkbox" name="option" value="checkedVisibleNok"  id="option" onclick="changeCheckBox();"/> 

     no 

</form> 
<script> 
var serNoChecked=""; 
function changeCheckBox() { 
try { 

     var max = document.mainForm.option.length; 
     var count = 0; 

     for (var i = 0; i < max; i++) { 
      if (document.mainForm.option[i].checked == true) { 
       count++; 
       serNoChecked = i; 
      } 
     } 
     if (count == 1) { 
      for (var i = 0; i < max; i++) { 
       if (document.mainForm.option[i].checked == false) { 
        document.mainForm.option[i].disabled = true; 
       } 
      } 
     } 
     else if (count == 0) { 
      for (var i = 0; i < max; i++) { 
       document.mainForm.option[i].disabled = false; 
      } 
     } 

     if (null == max) return false; 
     if (count == 0) { 
      return true; 
     } 
     else if (count > 0) { 
      return false; 
     } 

    } 
    catch (e) { 
     alert(e.message); 
    } 
} 
    </script> 

Answer 6

function toggle(chkBox, field) { 
    for (var i = 0; i < field.length; i++) { 
     field[i].checked = false; 
    } 
    chkBox.checked = true; 
} 


<td> 
    <INPUT type="checkbox" name="xyz" onClick="toggle(this,document.myform.xyz);" value="${incident.incidentID}"> 
</td> 

Answer 7

使用單選按鈕，並確保該名稱標籤與所有一致選項，它會自動選擇一個不需要附加代碼或JS的選項。