Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Los Angeles
    Posts
    545
    Thanks
    81
    Thanked 5 Times in 5 Posts

    Checkbox Disabled Help

    I'm setting a checkbox to disabled but only the checkbox itself is getting disabled - what I want to also do is change the checkbox text to color #808080 but .style.color = "#808080" does nothing. How can I also 'disable' the text label?

    Thanks...
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,553 Times in 4,517 Posts
    Checkboxes don't *HAVE* labels unless you put them there.

    So if you have a <label> tag, the style change should go on it.

    You *can* change the backgroundColor of a checkbox, too, which you may care to play with.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,240
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    This may be of use to you:-


    Code:
    <script type = "text/javascript">
    
    function changecolor() {
    if (document.myform.chk1.checked) {
    document.getElementById('spn1').style.backgroundColor='green';
    }
    else {
    document.getElementById('spn1').style.backgroundColor='red';
    }
    }
    
    </script>
    
    <form name = "myform">
    I agree to accept the terms and conditions <span id="spn1" style='background-color: red;'>
    <input type="checkbox" name = "chk1" onclick="changecolor()" ></span>
    </form>
    This changes the check mark to green. Works in IE and FF.
    Last edited by Philip M; 05-17-2009 at 10:32 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    Los Angeles
    Posts
    545
    Thanks
    81
    Thanked 5 Times in 5 Posts
    Perhaps the term label was not a good choice of words. The checkbox title (?) is "Create backup files" and thats what I'm trying to control the color of.

    PHP Code:
    <INPUT TYPE="checkbox" NAME="chk_create_backup_files"Create backup files 
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Either way, you need to get that text node's parent to fiddle with its styles. Using labels for form elements is good practice; if you're unable, or uninterested, wrap the text in a span, id it, and use getElementById. Otherwise:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <style type="text/css">
    
    .disabled {
    font:bold 12px arial;
    color: #808080;
    }
    .enabled {
    font:bold 12px arial;
    color: #eeaaaa;
    }
    </style>
    <script type="text/javascript">
    
    function disable()
    {
       var el = document.getElementById('someID');
       if (el)
       {
          el.disabled = !el.disabled;
          el.parentNode.className = el.disabled ? 'disabled' : 'enabled';
       }
    }
    
    </script>
    </head>
    <body>
    <form>
    <input type="button" value=" test " onclick="disable()" />
    <label class="enabled" for="someID">
    <input id="someID" type="checkbox" name="chk_create_backup_files">
    Create backup files</label>
    </form>
    </body>
    </html>
    http://webdesign.about.com/od/forms/a/aa052206.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •