Fadhil Fadhil - 1 year ago 168
Javascript Question

Disable bootstrap switch after onswitchchange

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

Here my javascript/jquery code:

onSwitchChange:function(event, state) {
this.disabled = true; //checkbox change into disabled

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

Answer Source

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/compatible) 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: http://stackoverflow.com/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! :)