Question

我使用这个漂亮的iOS复选框插件Switchery iOS checkbox。默认情况下，禁用该复选框。现在，如果用户单击具有＆＃34; btn_modify＆＃34;类的按钮，我想启用切换复选框。如果用户单击具有＆＃34; btn_cancel＆＃34;类的按钮，则将其禁用。以下是我的代码参考。

<input type="checkbox" name="" value="" class="js-switch" checked />
<button class="btn_modify">Modify</button>
<button class="btn_cancel">Cancel</button>

并激活转换

//switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
  var switchery = new Switchery(html, { size: 'small', disabled: true, disabledOpacity: 1.0 });
});

和我的尝试

$(".btn_modify").click(function(){
    $(".js-switch").attr("disabled", false);
});

$(".btn_cancel").click(function(){
    $(".js-switch").attr("disabled", true);
});

但遗憾的是没有工作，任何帮助，想法，线索，建议，建议将不胜感激。谢谢！

Answer 1

var elem = document.querySelector('.js-dynamic-state');
var switchery = new Switchery(elem);

document.querySelector('.js-dynamic-disable').addEventListener('click', function() {
  switchery.disable();
});

document.querySelector('.js-dynamic-enable').addEventListener('click', function() {
  switchery.enable();
});

在你的情况下，它将是

var elem = document.querySelector('.js-switch');
var switchery = new Switchery(elem);

document.querySelector('.btn_cancel').addEventListener('click', function() {
  switchery.disable();
});

document.querySelector('.btn_modify').addEventListener('click', function() {
  switchery.enable();
});

第二个选项

<强> CSS

.disabled{
 opacity: 0.5;
 pointer-events: none;    
}

<强> JS

$(".btn_modify").on("click",function(){
        $(".switchery").removeClass("disabled");
    });

$(".btn_cancel").on("click",function(){
    $(".switchery").addClass("disabled");
});

<强> Jsfiddle Demo

参考http://abpetkov.github.io/switchery/

Answer 2

disabled = false仍会注册为已禁用。启用它的唯一方法是完全删除disabled属性，如：

$(".js-switch").removeAttr('disabled');

将disabled属性设置为true或false switching

2 个答案: