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);，当然它会返回错误。我只是想知道如何在setDisable方法中调用onswitchchange方法。如果它不能那样。有没有其他方法可以在更改/点击后禁用开关？

Answer 1

UPDATE：使用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匹配元素类型 - 在这种情况下，它会选择div元素。
.some-class在课堂上匹配 - 在这种情况下，任何具有“some-class”作为班级的元素
#someId匹配元素的id - 在这种情况下，它会选择id为“someId”的元素

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

例如：

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

希望这有帮助！：）

onswitchchange后禁用引导开关

1 个答案: