已禁用複選框中的錯誤

我在頁面上使用了兩個複選框（test1和test2），我想編寫一個JavaScript代碼，如果另一個被選中則禁用一個代碼。它工作正常。但箱子只讀時，我需要text灰色。已禁用複選框中的錯誤

這裏是我的代碼

<div class="auto_pick"> 
       <input name="ch0" type="checkbox" value="" id="ch0" align="left" onclick="if (this.checked) document.getElementById('ch1').disabled=true; else document.getElementById('ch1').disabled = false;" style="float:left; margin-right:5px;" /> 
       Test1</div> 
       <div class="auto_pick1"> 
       <input name="ch1" type="checkbox" value="" id="ch1" align="left" onclick="if (this.checked) document.getElementById('ch0').disabled=true; else document.getElementById('ch0').disabled = false;" style="float:left; margin-right:5px;" /> 
       Test2</div>

來源

2012-03-08 designersvsoft

有你爲什麼不使用單選按鈕理由嗎？他們有瀏覽器內置的功能，不需要啓用JS ... – Moses 2012-03-08 06:44:40

您使用jQuery標籤的問題，我沒有看到任何的jQuery代碼，反正我在創建搗鼓你使用jQuery：http://jsfiddle.net/Fq32Q/

我想你應該CSS，而不是內聯樣式，並使用嵌入式JavaScript的函數。

HTML：

<div id="checkboxes"> 
    <label><input type="checkbox" id="ch0" /> Test1 </label> 
    <label><input type="checkbox" id="ch1" /> Test2 </label> 
</div>

CSS：

#checkboxes label { float:left; margin-right:5px; } 
#checkboxes label.disabled { color:#ccc; }

的Javascript：

$(function() { 
    $("#checkboxes input").click(checkCheckboxes); 
}); 

function checkCheckboxes() { 
    var checked = this.checked; 
    if(checked) { 
     $("#checkboxes input").not(":checked").attr('disabled', 'disabled') 
      .parent().addClass('disabled'); 
    } else { 
     $("#checkboxes input").removeAttr('disabled').parent().removeClass('disabled'); 
    } 
}

來源

2012-03-08 06:54:05 arunes

<div class="auto_pick"> 
       <input name="ch0" type="checkbox" value="" id="ch0" align="left" onclick="myfun(this.checked);" style="float:left; margin-right:5px;" /> 
       <label id="txt1">Test1</label></div> 
       <div class="auto_pick1"> 
       <input name="ch1" type="checkbox" value="" id="ch1" align="left" onclick="myfun(this.checked);" style="float:left; margin-right:5px;" /> 
       <label id="txt2">Test2</label></div> 

<script language="JavaScript"> 
function myfun(checked) 
{ 

    if (checked) 
    { 
     document.getElementById('ch0').disabled=true; 
     document.getElementById("txt1").style.color="grey"; 
     document.getElementById("txt2").style.color="black"; 
    } 
    else 
    { 
     document.getElementById('ch0').disabled = false; 
     document.getElementById("txt2").style.color="grey"; 
     document.getElementById("txt1").style.color="black"; 
    } 
}

來源

2012-03-08 06:55:45 saba

你可以這樣做：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Untitled Document</title> 

    <style type="text/css"> 
     .disabled { 
      color:#999; 
     } 
    </style> 

    <script type="text/javascript"> 
     function check(chk, id){ 
      var chk1 = document.getElementById(id); 
      if(chk.checked){ 
       chk1.disabled = true; 
       chk1.parentNode.className = "disabled"; 
      } 
      else { 
       chk1.disabled = false; 
       chk1.parentNode.className = ""; 
      } 

     } 
    </script> 

</head> 
<body> 
    <div class="auto_pick"> 
      <input name="ch0" type="checkbox" value="" id="ch0" align="left" onclick="check(this, 'ch1');" style="float:left; margin-right:5px;" /> 
      Test1</div> 
      <div class="auto_pick1"> 
      <input name="ch1" type="checkbox" value="" id="ch1" align="left" onclick="check(this, 'ch0');" style="float:left; margin-right:5px;" /> 
      Test2</div> 
</body> 
</html>

來源

2012-03-08 06:57:30 Aneesh

喜用的跨度類的文字。

<div class="auto_pick"> 
       <input name="ch0" type="checkbox" value="" id="ch0" align="left" /> 
       Test1</div> 
       <div class="auto_pick1"> 
       <input name="ch1" type="checkbox" value="" id="ch1" align="left" /> 
        <span id="text">Test2 </span></div>

jQuery代碼

$(function(){ 
    $("#ch0").click (function() { 

    if ($(this).is (":checked")) 
    { 
     $("#ch1").attr ("disabled" , true); 
     $("#text").css("color","grey"); 
    } 
    else 
    { 
     $("#ch1").removeAttr ("disabled" ,true); 
     $("#text").css("color","black"); 
    } 
    }); 
});

來源

2012-03-08 07:00:09 Gopesh

已禁用複選框中的錯誤

回答

相關問題