Jquery Switchery 复选框禁用在页面上创建的新复选框

Question

我很难禁用 Switchery 复选框但它在页面上为我创建了另一个 Switchery 复选框。我首先定义了效果很好的复选框：

<div class="form-group">
    <label class="col-md-2">
        Additional Options
    </label>
    <div class="col-md-3">
        <div class="">
            <label>
                <input type="checkbox" id="foo1"
                       name="foo1" class="js-switch"/>
            </label>
        </div>
    </div>
</div>

现在页面加载后，我动态地想禁用复选框，所以我这样做:

var foo1=  document.getElementById('foo1')
var switchery = new Switchery(foo1);
switchery.disable();

它禁用了复选框但是它在我已经定义的复选框附近为我创建了一个新的复选框我不明白为什么

Answer 1

我正在使用一个模板，它在他们的 JS 代码中有这个：

$(document).ready(function () {
    if ($(".js-switch")[0]) {
        var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
        elems.forEach(function (html) {
            var switchery = new Switchery(html, {
                color: '#26B99A'
            });
        });
    }
});

它在页面加载时运行，可以解释为什么您会看到 2 个开关对象。您可能需要在 JS 脚本中对其进行初始化，然后在页面本身上再次进行初始化。

我在尝试 enable/disable switchery 对象时遇到了类似的问题，因此我设置了一个全局 switchery 对象数组并添加了函数来控制它们的状态，如下所示：

var switchery_objs = [];

function enableSwitchery(id) {
    switchery_objs[id].enable();
}

function disableSwitchery(id) {
    switchery_objs[id].disable();
}

function toggleSwitchery(id) {
    switchery_objs[id].setPosition(true);
    switchery_objs[id].handleOnchange(true);
}

function setSwitchery(id, checked) {
    if((checked && !switchery_objs[id].isChecked()) || (!checked && switchery_objs[id].isChecked())) {
        switchery_objs[id].setPosition(true);
        switchery_objs[id].handleOnchange(true);
    }
}

if (window.Switchery && $(".js-switch")[0]) {
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function (html) {
        switchery_objs[html.getAttribute('id')] = new Switchery(html, {
            color: '#26B99A'
        });
    });
}

这样，您只需调用 disableSwitchery("foo1"); 即可将其标记为已禁用。

Jquery Switchery 复选框禁用在页面上创建的新复选框

Jquery Switchery checkbox disable created new checkbox on page

javascript

checkbox

jquery

switchery