Disable bootstrap switch after onswitchchange

Question

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?

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/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: https://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! :)