Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable checkbox with jquery?

I searched more time with it but it's not work, I want to checkbox is disabled, user not check and can check it if some condition. Ok, now, I tried disabled them. I use jquery 2.1.3

 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U01" />Banana
 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U02" />Orange
 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U03" />Apple
 <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U04" />Candy
$(window).load(function () {
    $('#chk').prop('disabled', true);
});
like image 724
Brian Crist Avatar asked Jun 14 '15 07:06

Brian Crist


People also ask

How do I make a checkbox checked and disabled in jQuery?

Syntax: // Select all child input of type checkbox // with class child-checkbox // And add the disabled attribute to them $('. child-checkbox input[type=checkbox]') . attr('disabled', true);

Is checkbox disabled jQuery?

In general, the checkbox disabling in jQuery is defined as disabling the checkbox element which grays out the checkbox element which can either be checked or unchecked when it is disabled by using different methods provided in jQuery such as using a prop() and attr() method and there is also one property which can be ...

How do I disable a checkbox?

The disabled property sets or returns whether a checkbox should be disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers. This property reflects the HTML disabled attribute.

How Disable checkbox button is unchecked in jQuery?

$( "#x" ). prop( "checked", false );


1 Answers

id should be unique. You cannot have four checkboxes with the same id.

You can try other selectors to select the whole range of checkboxes, like .checkbox1 (by class), input[type="checkbox"] (by tag/attribute). Once you've fixed the ids, you could even try #chk1, #chk2, #chk3, #chk4.

The snippet below uses the classname 'chk' instead of the id 'chk'. Also, it uses attr to set the attribute although it did work for me using prop as well.

$(window).load(function() {
  $('.chk').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="chk" name="check[]" value="U01" />Banana
<input type="checkbox" class="chk" name="check[]" value="U02" />Orange
<input type="checkbox" class="chk" name="check[]" value="U03" />Apple
<input type="checkbox" class="chk" name="check[]" value="U04" />Candy
like image 170
GolezTrol Avatar answered Oct 06 '22 00:10

GolezTrol