Only Select One Checkbox

I would like to build a javascript so a user can choose only one option between the the mentioned below. Could you give me some pointers how to do this since I am a javascript noob

Solution 1:

For single selection from multiple options we use Radio Buttons not CheckBoxes.

You should use some thing like this.

<inputtype="radio" name="option" value="Yes"id="yes" /> 
<inputtype="radio" name="option" value="No"id="no" /> 

But still if you want to go the other way round, Just add the following script in your head tag:

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>
$(document).ready(function(){
    $(':checkbox').bind('change', function() {
        var thisClass = $(this).attr('class');
        if ($(this).attr('checked')) {
            $(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
        }
        else {
            $(this).attr('checked', 'checked');
        }
    });
});
</script>

Here is the fiddle for above.

Hope this helps.

Solution 2:

This looks like a job for radio buttons, not checkboxes.

Solution 3:

you got a point to use radio buttons any way here is the javascript solution i used it in my project when there is search criteria and search result in data grid by ajax having 13 records when i check one record it disables the rest

code for javascript enable disable check boxes jsfiddle

<formname="mainForm"method="GET">

   Visible online?


       <inputtype="checkbox"name="option"value="checkedVisibleOk"id="option"onclick="changeCheckBox();"/>

 yes

        <inputtype="checkbox"name="option"value="checkedVisibleNok"id="option"onclick="changeCheckBox();"/>

       no

</form><script>var serNoChecked="";
functionchangeCheckBox() {
 try {

        var max = document.mainForm.option.length;
        var count = 0;

        for (var i = 0; i < max; i++) {
            if (document.mainForm.option[i].checked == true) {
                count++;
                serNoChecked = i;
            }
        }
        if (count == 1) {
            for (var i = 0; i < max; i++) {
                if (document.mainForm.option[i].checked == false) {
                    document.mainForm.option[i].disabled = true;
                }
            }
        }
        elseif (count == 0) {
            for (var i = 0; i < max; i++) {
                document.mainForm.option[i].disabled = false;
            }
        }

        if (null == max) returnfalse;
        if (count == 0) {
            returntrue;
        }
        elseif (count > 0) {
            returnfalse;
        }

    }
    catch (e) {
        alert(e.message);
    }
}
    </script>

Solution 4:

Try using Radio Button's, Give them the same name to group them and only allow 1 to be selected:

<td><labelfor="dock_books_search_visible_online"> Visible online?</label></td><td><inputtype="radio"name="option"value="checkedVisibleOk"id="dock_books_visible_ok"  /></td><td><labelfor="dock_books_search_visible_online_yes"> Yes</label></td><td><inputtype="radio"name="option"value="checkedVisibleNok"id="dock_books_visible_nok" /></td><td><labelfor="dock_books_search_visible_online_no"> No</label></td>

Check this JSFiddle.

Solution 5:

Hi why are you using checkbox? Checkboxes are not for the functionality that you want. Radio buttons are exact what you want to use.

<form><inputtype="radio"name="sex"value="male" /> Male<br /><inputtype="radio"name="sex"value="female" /> Female
 </form>

For further details look here