How to disable the other items in a checkboxlist when one of them is selected using Javascript

Question

i am using a checkbox list in a form. i have multiple options in the checkbox list. When one of the option is checked then other options should be disabled so that users should not be allowed to select other options.

i have done it in c# in the eventhandler but i cannot use postback anymore how can we do this in javascript or jquery

    foreach (ListItem li in chk_mycheckbox.Items)
            {

                if ((!(li.Text.ToString().Contains("Unknown"))))
                {
                    li.Enabled = false;

                }

            }

Answer 1

This is how you do

$(document).ready(function () {
    var checked = false;
    $('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
        var currentIdone = 'Unknown';
        var currentId = $(this).next().html();
        if (currentId == currentIdone) {

            if (checked) {

                $("#<%=lstExposureValue.ClientID%> input").removeAttr('disabled');
                checked = false;
                return;
            }
            else {
                $("#<%=lstExposureValue.ClientID%> input").attr('checked', false);
                $(this).attr('checked', true);
                $('#<%=lstExposureValue.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
                checked = true;
            }


        }

    });
});

Answer 2

Might you actually want a set of radio buttons instead.

e.g.

<li><input type="radio" name="gender" value="male">Male</li>
<li><input type="radio" name="gender" value="female">Female</li>

As it will enforce only one selection.

However, in your current scenario you could use the following lines to loop over the checkboxes and disable any that are not selected. (this is using jquery 1.6+)

$('input[type=checkbox]').each(function () {
    if(!$(this).is(':checked')){
        //if not checked
        $(this).prop('disabled', true);
    }
});

Following on from your comment.

Give the tick boxes that should disable the others an extra class e.g. "single-selection". Then your code can look something like this:

$(document).ready(function() {
    $('#formId input.single-selection').on('click', function (e) {
        var selectedCheckbox = $(this);
        if(selectedCheckbox.is(':checked')){
            $('#formId input[type=checkbox]').each(function () {
                if(selectedCheckbox[0] != $(this)[0]){
                    //if not selected checkbox
                    $(this).prop('disabled', true);
                    $(this).attr('checked', false);
                }
            });
        }else{
            $('#formId input[type=checkbox]').prop('disabled', false);
        }
    });
});

I've not tested it, but I believe this is what you need. Just replace the ids and classes with what you're using.

Answer 3

Assuming you want the other options to become enabled if the user deselects the selected option, you could try this code. The code assumes that your form has an ID of 'form1'

$('#form1 input').on('click',function(evt){
    var clickedEl = evt.target;
    if(clickedEl.checked){
        $('#form1 input').each(function(){
            $(this).attr('disabled',true);
        });
        $(clickedEl).attr('disabled',false);
    }
    else{
        $('#form1 input').each(function(){
            $(this).attr('disabled',false);
        });
    }
});

Note that in jquery, the each function allows you to pass it a function that will be called on each element matched by the selector.

Here is a jsfiddle with the code working: http://jsfiddle.net/vvt5g/

Answer 4

Agree with Andrew's answer, that is the functionality of radio buttons.

In any way, going further, you will need to also control if the user has unchecked the checkbox.

Given a list of checkboxes as:

<input type='checkbox' >A
<input type='checkbox' >B
<input type='checkbox' >C
<input type='checkbox' >D

The script part could work like this:

<script>
var checked = false; //will save current state of checkboxes

$('input:checkbox').click(function(){

  //if one was checked and then unchecked will enable all and return
  if(checked)
  {
    $('input:checkbox').each(function(){
       $(this).prop('disabled', false);
    });
    checked = false;
    return;
  }

  //if none was checked before, disable the rest
  $('input:checkbox').each(function(){
    if(!$(this).is(':checked')){
       $(this).prop('disabled', true);
    }
    else
       checked = true;
  });
});
</script>

FIDDLE

Answer 5

I have created a JsFiddle for you:

http://jsfiddle.net/jK4NE/

In short, I added a class myCheckBox on each checkBox and added the below jQuery code on Click:

$('.myCheckBox').click(function(){
    var currentId = $(this).attr('id');
    $('.myCheckBox').each(function(){
        if($(this).attr('id') != currentId){
            $(this).attr("checked", false);
        }
    });
});

If you have checkBoxes under a particular ID then you can target the same by using

#YourID input:checkbox

Example:

$('#YourID input:checkbox').click(function(){
    var currentId = $(this).attr('id');
    $('#YourID input:checkbox').each(function(){
        if($(this).attr('id') != currentId){
            $(this).attr("checked", false);
        }
    });
});

Answer 6

try this

HTML:

<ul>
<li><input type="checkbox" name="gender" value="male">Male</li>
<li><input type="checkbox" name="gender" value="female">Female</li>
    </ul>

jQuery Code

$('input').change(function(){

    if( $(this).prop('checked') ){
        $(this).parent().parent().find('input').prop('disabled', true);
        $(this).prop('disabled', false);
    }

});

Demo