체크 박스의 버그가 비활성화되었습니다.

페이지 (test1 및 test2)에 두 개의 체크 박스를 사용하고 있는데, 다른 하나를 선택하면 JavaScript 코드를 쓰지 못하게하려고합니다. 그것은 잘 작동합니다. 하지만 상자가 읽기 전용 인 경우 회색 색상이 text 필요합니다. 난 당신이 대신 CSS해야한다고 생각 http://jsfiddle.net/Fq32Q/체크 박스의 버그가 비활성화되었습니다.

: 여기

당신은 jQuery로 질문을 태그

<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

내 코드입니다, 내가 어떤 jQuery 코드를 참조 해달라고 어쨌든 난에서 jQuery로 당신을 위해 바이올린을 만들어 인라인 스타일을 사용하고 인라인 자바 스크립트에 함수를 사용합니다.

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; }

자바 스크립트 :

$(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

체크 박스의 버그가 비활성화되었습니다.

답변

관련 문제