I am new at coding with bootstrap and jquery. how can i disable bootstrap switch in "onswitchchange" method option

Here my javascript/jquery code:

$("input[type=checkbox]").bootstrapSwitch({
    size:"mini",
    onSwitchChange:function(event, state) {
      this.disabled = true; //checkbox change into disabled
    }
  });

i also tried to change this.disabled = true into $(this).setDisabled(true); and it returning error of course. i just want to know how to call setDisable method inside onswitchchange method. if it cannot be like that. is there any other way to disable the switch after change/click it it?

I am new at coding with bootstrap and jquery. how can i disable bootstrap switch in "onswitchchange" method option

Here my javascript/jquery code:

$("input[type=checkbox]").bootstrapSwitch({
    size:"mini",
    onSwitchChange:function(event, state) {
      this.disabled = true; //checkbox change into disabled
    }
  });

i also tried to change this.disabled = true into $(this).setDisabled(true); and it returning error of course. i just want to know how to call setDisable method inside onswitchchange method. if it cannot be like that. is there any other way to disable the switch after change/click it it?

• javascript
• jquery
• twitter-bootstrap
• bootstrap-switch

• 1 Use the attr() function in jQuery to achieve this. I've posted an answer below. Note that disabled elements aren't posted with a form - if you want their values to be posted, use readonly instead :) – Geoff James Commented Aug 27, 2016 at 15:41
• @GeoffJames i tried it before. didnt work either. it just disabled the hidden check box. but not full element. i still can click and change the state. – Fadhil Ahmad Commented Aug 27, 2016 at 15:57
• 1 Can you post your code that contains the switch and checkbox, please? You could use the .closest('element') selector to find the container that the checkbox is in, and then disable that. Bit hard to say exactly without seeing surrounding HTML - if you post the code, I'll update my answer :) – Geoff James Commented Aug 27, 2016 at 15:59
• 1 I've edited my answer to include how to use the .closest() function, which will hopefully help a little. I can't be entirely sure/accurate as to what your selector needs to be, but if you wouldn't mind updating your OP with the surrounding HTML for your Bootstrap switch, then I can add to my answer and be a little more specific :) – Geoff James Commented Aug 27, 2016 at 16:40

1 Answer 1

UPDATE: When using the Bootstrap Switch, you can use one of 2 functions:

$(this).bootstrapSwitch("toggleDisabled"); // toggles whether `this` is disabled

$(this).bootstrapSwitch("disabled",true); // just disables the `this` element

So in your onSwitchChange handler, you can use the bootstrapSwitch("disabled", true) method:

onSwitchChange:function(event, state) {
  $(this).bootstrapSwitch('disabled', true);
}

There's no real point in "toggling", as it's in a handler for when it changes - when it's disabled, it shouldn't change again.

Previous answer - for those wanting to use jQuery to disable elements

If you want to set a form element to disabled, you need to declare its disabled attribute.

There is controversy whether this should be set to true, just declared, or set to disabled.

Personally (and the most favourable/patible) is to set disabled=disabled.

To set element attributes using jQuery, you can use the attr() function (first argument is attribute, second argument is value):

onSwitchChange:function(event, state) {
  $(this).attr('disabled', 'disabled'); // set the element's disabled attribute
}

NOTE: Since you are disabling the checkbox - this means the value of it won't get posted with a form.

If you need the value to be POSTed with a form, use the readonly attribute and set it to readonly:

onSwitchChange:function(event, state) {
  $(this).attr('readonly', 'readonly'); //checkbox is readonly, but still POSTed 
}

Here's a great answer explaining the differences between disabled and readonly: https://stackoverflow./a/7357314/6240567

EDIT: The above code only disables/readonly the checkbox itself. In order to disable the container, or other elements within that you will need to use the .closest() selector.

Top tip on selectors, and which ones you need:

• div matches on element type - in this case it selects div elements.
• .some-class matches on class - in this case any element that has "some-class" as the class
• #someId matches on element's id - in this case it selects the element with the id of "someId"

With that said, you can then select the closest element that you're looking to disable (or the container for it)

For example:

  // set the checkbox's closest element with "bootstrapSwitch" class, to disabled
  $(this).closest('.bootstrapSwitch').attr('disabled', 'disabled');

Hope this helps! :)