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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    England
    Posts
    132
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Question How to make only one checkbox value selectable?

    I am experimenting with checkboxes. I have created a basic form with four options. I only want users to be able to select one option. At the moment they can select all four.

    Code:
    <label for="question1">1. Which came first, the chicken or the egg?<br />
    
    <input name="question1" class="inset" id="question1" accesskey="3" type="checkbox" value="chicken" /> The Chicken
    <input name="question1" class="inset" id="question1" accesskey="4" type="checkbox" value="egg" /> The Egg
    <input name="question1" class="inset" id="question1" accesskey="5" type="checkbox" value="don't know" /> Don't Know
    <input name="question1" class="inset" id="question1" accesskey="6" type="checkbox" value="don't care" /> Don't Care
    Live form : http://mbmitservices.co.uk/checkbox/survey.php
    Last edited by Mehdi72; 04-26-2013 at 05:59 PM.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,980
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Not a PHP issue, moving to HTML/CSS.
    Best I know, you can't. Checkboxes are toggles, not selectors. To do singles you should be using a select or possibly radios.
    I don't think HTML/CSS has a way to override the renderer. If there is, you could render a select or radio as a checkbox.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    You _can_ do it with JavaScript; but, why? Can you use radio inputs, instead? Or does it have to be checkbox?

    In JavaScript, if all like checkboxes have the same name but a different ID, four checkboxes become an array (more precisely, an object that behaves like an array.) Loop through the length of that 'array' and uncheck all checkboxes except the one checked. Using "this" as the object, it should be very simple.
    Last edited by WolfShade; 04-26-2013 at 05:59 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    England
    Posts
    132
    Thanks
    24
    Thanked 0 Times in 0 Posts
    So radio buttons for single selections and checkboxes for multiple. I found code to make the radio button appear as a checkbox :

    Code:
    input[type="radio"] {
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        -ms-appearance: checkbox;     /* not currently supported */
        -o-appearance: checkbox;      /* not currently supported */
    }

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    England
    Posts
    132
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    You _can_ do it with JavaScript; but, why? Can you use radio inputs, instead? Or does it have to be checkbox?
    Purely for aesthetic reasons though it's not really important.

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by Mehdi72 View Post
    So radio buttons for single selections and checkboxes for multiple. I found code to make the radio button appear as a checkbox :
    Make sure it's cross-browser. I know not every browser works well with webkit.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Smile Fix for single checkbox selection

    You will need to use script to check the onclick event - but this will disable / enable other check boxes based on one box being checked or unchecked. hope this helps.


    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <form>
    Cats:<input type="checkbox" id="cats" onclick="disable1()"><br>
    Dogs:<input type="checkbox" id="dogs" onclick="disable2()"><br>
    Horse:<input type="checkbox" id="horse" onclick="disable3()"><br>
    </form>
    
    <script>
    
    function disable1()
    { if (document.getElementById("cats").checked) {
    document.getElementById("dogs").disabled=true;
    document.getElementById("horse").disabled=true;}
    else
    {
    document.getElementById("dogs").disabled=false;
    document.getElementById("horse").disabled=false;}
    }
    
    function disable2()
    { if (document.getElementById("dogs").checked) {
    document.getElementById("cats").disabled=true;
    document.getElementById("horse").disabled=true;}
    else
    {
    document.getElementById("cats").disabled=false;
    document.getElementById("horse").disabled=false;}
    }
    
    function disable3()
    { if (document.getElementById("horse").checked) {
    document.getElementById("dogs").disabled=true;
    document.getElementById("cats").disabled=true;}
    else
    {
    document.getElementById("dogs").disabled=false;
    document.getElementById("cats").disabled=false;}
    }
    
    </script>
    </body>
    </html>

  • #8
    Regular Coder
    Join Date
    Jul 2007
    Location
    England
    Posts
    132
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    Make sure it's cross-browser. I know not every browser works well with webkit.
    Noted. It's a mess in IE9 & IE10 so I'll stick with the the radio buttons.

  • #9
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,980
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    I'm a fan of using 0 reliance on anything to do with JS. Its a feature enhancement language. So I make it work in PHP first, then in XML, then I'd consider JS. Its been years and years since I've done JS or HTML at all, so I'm glad to here there are renderer overrides.
    Stick with the use of the radio buttons, and implement the CSS to override the renderer. The ones starting with - define them as being proprietary, so you know there is no built in direct support for this in CSS3. I would approach it as a best try, and leave it at that. If the browser supports and renders with a checkbox, thats super. But if not, well you get the radio. IMO functionality will override the display, and since these are form controls they typically are handled directly by a server side language (which is why I suggest not using the JS approach).
    On a side note, I also prefer checked selections versus radios. I do not know why; anytime I write an application one of the first things I do on the gui when placing any radio type controls is override the renderer to show it as a checkbox. Super easy to do in languages like Java and C#, and IMO looks so much nicer than the radio or toggle type controls.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #10
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Thumbs up

    Despite the facts that the OP considers this resolved, and the (respected) position Fou-Lu takes on JS, I offer the following.

    You don't even need to pass the element as an object, with checkboxes.

    Code:
    <form name="animals" id="animals">
      <input type="checkbox" name="animalList" id="animal1" value="Horse" onmouseup="onlyOne();"> Horse
      <br /><input type="checkbox" name="animalList" id="animal1" value="Cat" onmouseup="onlyOne();"> Cat
      <br /><input type="checkbox" name="animalList" id="animal1" value="Platypus" onmouseup="onlyOne();"> Platypus
      
    </form>
    
    <script>
      var animals = document.forms['animals'], animalList = animals.animalList, animalLen = animalList.length;
    
    function onlyOne(){
      for(var i = 0; i < animalLen; i++){
        animalList[i].checked = false;
        }
        this.checked = true;
      }
    </script>
    WAIT! Tested in IE8 - let me check FF and Chrome..

    .. okay.. works in IE8, FF 17, and Chrome.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Tags for this Thread

    Posting Permissions

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