0

I have this for my checkbox,

$('.cuttingCheckbox').change(function() {
         if (this.checked) {
           alert('checked');
         } else {
           alert('unchecked');
         }
       });

I want to disabled it right after the user check the checkbox. Please help me on how to do this. I know this is very simple but im very new on this stuff.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Chriskonz
  • 199
  • 1
  • 3
  • 12
  • 2
    `this.disabled = true;` should do that. – Ja͢ck Apr 14 '14 at 02:22
  • 2
    Why do you want to do this? The value of disabled form elements is not included in the request and the user is unable to uncheck the checkbox once it's disabled. Sounds like a bad user experience... – Felix Kling Apr 14 '14 at 02:24
  • possible duplicate of [JQuery - checkbox enable/disable](http://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable) – Felix Kling Apr 14 '14 at 02:25

2 Answers2

1

Just set the disabled attribute to true when you detect that the checkbox is in a checked state, IE:

$('.cuttingCheckbox').change(function() {
     if (this.checked) {
       alert('checked');
       this.disabled = true; 
     } else {
       alert('unchecked');
     }
   });

I would also recommend thinking through why you want to disable it. Disabled form element values are not sent to the server.

Alex
  • 64,178
  • 48
  • 151
  • 180
  • 1
    If using `setAttribute()`, wouldn't the value be `"disabled"`? `this.disabled = true` would be better IMO. – alex Apr 14 '14 at 02:23
  • @alex Doh! My mistake. My brain must've disengaged for a few seconds, and agreed, edited to reflect this. :) Love SO specifically because errors are caught and corrected so quickly. – Alex Apr 14 '14 at 02:24
-1
$('.cuttingCheckbox').change(function() {
         if (this.checked) {
          document.getElementById("cuttingCheckbox").disabled= true
         } else {
          document.getElementById("cuttingCheckbox").disabled = false
         }
       });

Hope this might help. :)

  • 3
    Why do you assume there is an element with ID `cuttingCheckbox`? Also, this wouldn't lead to the desired results if there are multiple checkboxes with class `cuttingCheckbox`. – Felix Kling Apr 14 '14 at 02:26