禁用/启用 jQuery Mobile 输入的常用方法是什么？

Question

我有一个编辑表单，其中包含 jQuery Mobile 输入，例如文本输入、滑块、复选框和按钮。 当表单首次显示时，将获取要编辑的内容（模型）。

在开始获取之前，我禁用所有表单元素以防止用户在获取内容（模型）时执行任何操作。只有取消按钮应该起作用。 “已禁用”表示灰显且我无法点击。

表单加载完成后，我再次启用表单元素。

目前，我只能通过自己选择每种输入类型来做到这一点。

//These inputs work with .prop("disable", "true")
//#save is an <button type="submit">
var normalInputs = $("input[type='text'], #save");
//JQM converts <input type="range"> to this
var sliders = $("input[data-type='slider']");
var checkboxes = $("input[type='checkbox']");

normalInputs.prop("disabled", "true");
sliders.slider("disable").slider("refresh");
checkboxes.checkboxradio("disable").checkboxradio("refresh");

为了启用，我什至必须调用 slider() 和 checkboxradio() 初始化方法，否则会出错 (cannot call methods of xxx prior to initialization. attempted to call method enable)

是否有一种方法可以通过仅使用一个选择器来正确禁用所有 jQuery Mobile 输入？禁用/启用输入的常用方法？

Answer 1

您可以使用ui-state-disabled 类禁用任何元素。这个类被 jQM 添加到具有disabled="disabled" 属性的 disabled 中。

可以添加到form。

$("#form").addClass("ui-state-disabled");

按元素，即input，应将其添加到父div，因为input在创建时被包裹在div中。

$("input").closest("div").addClass("ui-state-disabled");

Demo