禁用并启用li上的按钮选择
我希望禁用继续按钮，当选中li时，如选中，并启用当我取消选中时，我使用simscheckbox lib，使li可检查。我把这个库放在上面的html代码中，但是如何禁用并启用这个功能，当我点击li项目任何和它的禁用和启用，当我再次点击它的启用，plzz帮助我......我的lib运行“T运行这个堆栈，但我对我的conputer运行，所以我告诉李是可检查的项目..你可以看到simscheckbox js文件我把HTML代码.... PLZ帮助..禁用并启用li上的按钮选择
(function($) { $('.check').change(function() {
if ($('.check:checked').length) {
$('.btn_check').removeAttr('disabled');
} else {
$('.btn_check').attr('disabled', 'disabled');
}
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://drive.google.com/file/d/1QoDVNlXUfTkKgzvzuIYRqldynG-N0Bbo/view?usp=sharing.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="quiz" id="quiz" data-toggle="buttons">
<ul class="demo" id="sn-list">
<li class="input-lg check">Pepperoni</li>
<li class="input-lg check">Mushrooms</li>
<li class="input-lg check">Anchovies</li>
<li class="input-lg check">Sausage</li>
<li class="input-lg check">Artichoke hearts</li>
</ul>
<button type="submit" class="btn btn-success btn_check">Continue
\t </button>
</div>
回答：
对于将来的问题，请明确提到您使用的插件（提供链接！）...在这种情况下，哪个是simsCheckbox。
为了您的HTML标记，我只是添加了disabled属性。
现在，disabled是属性，而不是属性。
所以你必须使用$('.btn_check').prop('disabled', [true/false]);来改变它使用jQuery。
您还必须使用.simsCheckbox()实例化该插件，如在GitHub页面中清楚说明的那样。
现在...你只是想启用/禁用一个按钮...至少基于一个li检查。
正如您将在下面看到的，在click上，它切换了checked类。
因此，如果至少有一个.check也具有.checked，则启用该按钮。
对不起所有，但我不得不复制粘贴GitHub上的插件脚本，因为没有可用的CDN。
看方式低于的解决方案。
// See way below for my solution... // ======== simscheckbox copy pasted form: https://raw.githubusercontent.com/simsek97/simsCheckbox/master/simsCheckbox.js
/*!
* SmartClass Checkbox plugin
* ===================================
*
* developed by Mert Simsek ([email protected])
* for SmartClass Project [www.smartclass.us]
* -------------------------
* @usage $("#element").simsCheckbox();
*/
(function($) {
//vars
var _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
//plugin init
$.fn.simsCheckbox = function(options) {
var selectorElt = this,
checkboxClass = "btn btn-block btn-social";
//settings
var settings = $.extend({
//style
//set treat as checkbox or radio
btnStyle: 'checkbox',
//selector height
height: 'auto',
//element
element: "li",
//title icon
titleIcon: "square-o",
//unchecked class
uncheckedClass: "btn-default",
//checked class
checkedClass: "btn-warning",
//select/unselect all button
selectAllBtn: false,
//select/unselect text
selectAllText: 'Select/Unselect All',
//callback fn ifChecked
ifChecked: function() {},
//callback fn ifUnChecked
ifUnChecked: function() {},
//callback fn ifToggled
ifToggled: function() {},
}, options);
return selectorElt.each(function(){
//set some css for the selector
selectorElt.css({'margin': '0', 'padding': '0'});
//set the height of the selector first
if(settings.height == 'auto') selectorElt.css('height', 'auto');
else selectorElt.css({'height': settings.height, 'overflow': 'auto'});
//add an identifier class to the elements
selectorElt.find(settings.element).addClass('sims-selectable');
//get elements and handle
selectorElt.find(settings.element).each(function(i) {
var simsElement=$(this), simsElementTitle=simsElement.html();
//add checkbox class
simsElement.addClass(checkboxClass);
//add checked or unchecked class
if(simsElement.hasClass('checked')) simsElement.addClass(settings.checkedClass).html('<i class="fa fa-fw fa-check-' + settings.titleIcon + '"></i> ' + simsElementTitle);
else simsElement.addClass(settings.uncheckedClass).html('<i class="fa fa-fw fa-' + settings.titleIcon + '"></i> ' + simsElementTitle);
//set click event if it is not disabled
simsElement.off('click').on('click', function (e) {
e.preventDefault();
//if the element is disabled then do nothing
if($(this).hasClass('disabled')) return false;
//if the style is radio kind then unselect all first
if(settings.btnStyle == 'radio')
{
selectorElt.find(settings.element).addClass(settings.uncheckedClass).removeClass(settings.checkedClass).find('i').addClass('fa-' + settings.titleIcon).removeClass('fa-check-' + settings.titleIcon);
}
//toggle the item
$(this).toggleClass(settings.uncheckedClass).toggleClass(settings.checkedClass).find('i').toggleClass('fa-' + settings.titleIcon).toggleClass('fa-check-' + settings.titleIcon);
//callback
clickCheckbox($(this));
}); //end simsElement click
}); //end selectorElt each
//set checkAll button
if(settings.selectAllBtn)
{
//test all checked or not
var allChecked = (selectorElt.find(settings.element).length == selectorElt.find(settings.element + '.checked').length) ? true : false;
var selectAllBtnContainer = $('<ul></ul>').css({'margin': '5px 0 0 0', 'padding': '0'});
var selectAllBtnElt = $('<' + settings.element + ' class="sims-btn-select-all"></' + settings.element + '>').css('border', '1px dashed').addClass(checkboxClass + ' ' + (allChecked ? settings.checkedClass : settings.uncheckedClass)).html('<i class="fa fa-fw fa-' + (allChecked ? 'check-' : '') + settings.titleIcon + '"></i> ' + settings.selectAllText);
selectorElt.after(selectAllBtnContainer.append(selectAllBtnElt));
//set click event for the selectAll button
selectAllBtnContainer.find('.sims-btn-select-all').off('click').on('click', function (e) {
//prevent default events
e.preventDefault();
//get button
var thisButton = $(this);
//toggle the item
thisButton.toggleClass(settings.uncheckedClass).toggleClass(settings.checkedClass).find('i').toggleClass('fa-' + settings.titleIcon).toggleClass('fa-check-' + settings.titleIcon);
//if all items are selected then select-all button is checked
//if one of the items is unselected then select-all button is unchecked
selectorElt.find(settings.element + '.sims-selectable:not(.disabled)').each(function(){
//fix classes of the items
if(thisButton.hasClass("btn-default")) $(this).removeClass(settings.uncheckedClass).addClass(settings.checkedClass).find('i').removeClass('fa-' + settings.titleIcon).addClass('fa-check-' + settings.titleIcon);
else $(this).addClass(settings.uncheckedClass).removeClass(settings.checkedClass).find('i').addClass('fa-' + settings.titleIcon).removeClass('fa-check-' + settings.titleIcon);
//trigger click event for the items
$(this).trigger("click");
});
});
} //end if
function clickCheckbox(item) {
//check if the button checked or unchecked
//then call function properly
if(item.hasClass(settings.checkedClass)) settings.ifChecked.call(item);
else settings.ifUnChecked.call(item);
//call toggle function anyways
settings.ifToggled.call(item);
}
}); //end return
} //end function
}(jQuery));
// ===========================================================
// My solution for OP is here
$(document).ready(function(){
// INSTANTIATE the plugin!!!
// That was copy/pasted form: https://github.com/simsek97/simsCheckbox
$(".demo").simsCheckbox({
/*
ifChecked: function() {
console.log('checked');
},
ifUnchecked: function() {
console.log('unchecked');
},
ifToggled: function() {
console.log('toggled');
}
*/
// Here is the place for some callbacks on each click.
});
// And that is what you want:
$('.check').on("click",function() {
$(this).toggleClass("checked");
if ($(".check.checked").length>0) {
$('.btn_check').prop('disabled', false);
} else {
$('.btn_check').prop('disabled', true);
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quiz" id="quiz" data-toggle="buttons">
<ul class="demo" id="sn-list">
<li class="input-lg check">Pepperoni</li>
<li class="input-lg check">Mushrooms</li>
<li class="input-lg check">Anchovies</li>
<li class="input-lg check">Sausage</li>
<li class="input-lg check">Artichoke hearts</li>
</ul>
<button type="submit" class="btn btn-success btn_check" disabled>Continue</button>
</div>
以上是 禁用并启用li上的按钮选择 的全部内容， 来源链接： utcz.com/qa/257191.html
