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?

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, Aug 27 '16 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, Aug 27 '16 at 15:57
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, Aug 27 '16 at 15:59
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, Aug 27 '16 at 16:40

score 4 · Accepted Answer · edited May 23 '17 at 12:17

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

thank you for helping.. ive found the solution. it need to be replace with `$(this).bootstrapSwitch("toggleDisabled");` or `$(this).bootstrapSwitch("disabled",true);`. it will be great if you edit your answer as this. so i can accept it as the best answer. and it will help the others who have the same problem as me. — Fadhil Ahmad, Aug 27 '16 at 17:05
Thanks @Fadhil, I've included this at the top of my answer :) Glad you got it working — Geoff James, Aug 27 '16 at 19:58
ok thank you...fyi: im working with ajax right now. it will send the switch state to the database. so i need to disable the switch until ajax get the callback. after that the switch will be enabled.:) — Fadhil Ahmad, Aug 27 '16 at 20:34
`$(this).bootstrapSwitch('readonly', true);` works for me. I replaced the second parameter from 'readonly' to `true` — Lynnell Neri, Mar 03 '17 at 07:14

Disable bootstrap switch after onswitchchange

1 Answers1

Linked