在 onswitchchange 后禁用 bootstrap 开关

Question

我是 bootstrap 和 jquery 编码的新手。我怎样才能在 "onswitchchange" 方法选项

中禁用 bootstrap 开关

这是我的 javascript/jquery 代码：

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

我还尝试将 this.disabled = true 更改为 $(this).setDisabled(true); 并且它当然会返回错误。我只想知道如何在 onswitchchange 方法中调用 setDisable 方法。如果不能那样的话。在 change/click 之后还有其他方法可以禁用开关吗？

Answer 1

更新： 使用 Bootstrap 开关时，您可以使用以下两个功能之一：

$(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);
}

"toggling" 中没有任何实际意义，因为它在更改时的处理程序中 - 当它被禁用时，它不应该再次更改。

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

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

这是应该设置为true，只是声明，还是设置为disabled存在争议。

个人（也是最多favourable/compatible）是设置disabled=disabled.

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

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

注意： 因为您禁用了复选框 - 这意味着它的值不会与 form.

一起发布

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

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

这里有一个很好的答案，解释了 disabled 和 readonly 之间的区别：

编辑: 上面的代码只是disables/readonly checkbox 本身。为了禁用容器或其中的其他元素，您需要使用 .closest() selector.

关于 select 或您需要的重要提示：

div 匹配元素 type - 在本例中它是 selects div 个元素。
.some-class 匹配 class - 在这种情况下任何具有“some-class”的元素作为 class
#someId 匹配元素的 id - 在本例中，它 select 是具有“someId”

id

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

例如：

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

希望对您有所帮助！ :)

在 onswitchchange 后禁用 bootstrap 开关

Disable bootstrap switch after onswitchchange

javascript

jquery

twitter-bootstrap

bootstrap-switch