onswitchchange 后禁用引导开关

Question

我是使用 bootstrap 和 jquery 编码的新手。如何在“onswitchchange”方法选项中禁用引导开关

这是我的 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 方法。如果它不能那样。更改/单击后是否有其他方法可以禁用开关？

Answer 1

更新：使用 Bootstrap Switch 时，您可以使用以下两种功能之一：

$(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 一起发布。

---

如果您需要将值与表单一起发布，请使用readonly 属性并将其设置为readonly：

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

---

这是一个很好的答案，解释了disabled 和 readonly 之间的区别：https://stackoverflow.com/a/7357314/6240567

---

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

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

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

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

例如：

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

希望这会有所帮助！ :)