在onswitchchange之后禁用引导程序开关 [英] Disable bootstrap switch after onswitchchange

问题描述

我是使用Bootstrap和jquery进行编码的新手.如何在"onswitchchange"方法选项中禁用引导开关

I am new at coding with bootstrap and jquery. how can i disable bootstrap switch in "onswitchchange" method option

这是我的javascript/jquery代码:

Here my javascript/jquery code:

$("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方法.如果不是那样的话.更改/单击后，还有其他方法可以禁用该开关吗?

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?

推荐答案

更新:使用Bootstrap Switch时，可以使用以下两个功能之一:

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

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

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.

上一个答案-适用于希望使用jQuery禁用元素的人

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

If you want to set a form element to disabled, you need to declare its disabled attribute.

将其设置为true，刚刚声明还是设置为disabled一直存在争议.

There is controversy whether this should be set to true, just declared, or set to disabled.

个人设置(也是最有利/最兼容的)是设置disabled=disabled.

Personally (and the most favourable/compatible) is to set disabled=disabled.

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

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
}

注意::由于您禁用了此复选框-这意味着它的值不会用form发布.

NOTE: Since you are disabling the checkbox - this means the value of it won't get posted with a form.

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

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 
}

---

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

---

Here's a great answer explaining the differences between disabled and readonly: https://stackoverflow.com/a/7357314/6240567

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

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匹配元素 type -在这种情况下，它将选择div元素.
• .some-class在类上匹配-在这种情况下，任何以"some-class"为类的元素
• #someId与元素的id匹配-在这种情况下，它将选择id为"someId"的元素

• 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"

话虽如此，然后您可以选择要禁用的closest元素(或其容器)

With that said, you can then select the closest element that you're looking to disable (or the container for it)

例如:

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

希望这会有所帮助！ :)

Hope this helps! :)

这篇关于在onswitchchange之后禁用引导程序开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！