CODEWITHSUNDEEP
jqueryhtmlcss
designersvsoft
designersvsoft

Reputation: 1859

bug in checkbox disabled

I am using two checkboxes on a page (test1 and test2), I want to write a JavaScript code that disables one if the other is checked. It works fine. but i need text grey color when box is read only.

Here is my code

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

Upvotes: 0

Views: 406

Answers (4)

Gopesh
Gopesh

Reputation: 3950

Hi use a span class to the text.

<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 code

$(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");
    }
  });
});​

Upvotes: 1

Aneesh
Aneesh

Reputation: 1203

You can do in this way:

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

Upvotes: 0

saba
saba

Reputation: 382

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

Upvotes: 0

arunes
arunes

Reputation: 3524

You tagged question with jquery, i dont see any jquery code, anyway i created fiddle for you with jquery at: http://jsfiddle.net/Fq32Q/

I think you should css instead of inline styles, and use functions for inline 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');
    }
}

​

Upvotes: 0

Related Questions