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

更新：使用引导开关时，您可以使用以下 2 个功能之一：

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

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

因此，在您的onSwitchChange处理程序中，您可以使用以下bootstrapSwitch("disabled", true)方法：

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

“切换”没有真正的意义，因为它在更改时的处理程序中 - 当它被禁用时，它不应该再次更改。

上一个答案 - 对于那些想要使用 jQuery 禁用元素的人

如果要将表单元素设置为disabled，则需要声明其disabled 属性。

true对于是否应该设置为、刚刚声明或设置为存在争议disabled。

就个人而言（也是最有利/兼容的）是设置disabled=disabled.

要使用 jQuery 设置元素属性，您可以使用以下attr()函数（第一个参数是属性，第二个参数是值）：

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

注意：由于您禁用了该复选框 - 这意味着它的值不会以form.

如果您需要使用表单 POST 值，请使用该readonly属性并将其设置为readonly：

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

disabled这是一个很好的答案，解释了和之间的差异readonly：/sf/answers/515012011/

编辑：上面的代码仅禁用/只读其checkbox本身。为了禁用容器或其中的其他元素，您将需要使用.closest()选择器。

关于选择器的重要提示以及您需要哪些选择器：

• div匹配元素类型- 在本例中它选择div元素。
• .some-class匹配类 - 在这种情况下，任何具有“ some-class”作为类的元素
• #someId匹配元素的- 在本例中，它选择带有“ ”的id元素idsomeId

话虽如此，您可以选择closest要禁用的元素（或其容器）

例如：

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

希望这可以帮助！:)