已选中 li 上的禁用和启用按钮
disable and enable button on li selected
我想在选中 li 时禁用继续按钮，并在取消选中时启用，我使用 simscheckbox lib 使 li 可以选中。如您所见，我将此库放在上面的 html 代码中，但是当我单击 li item any 及其禁用和启用时如何禁用和启用它，当我再次单击其启用时，请帮助我.. .my lib 没有 运行 这个堆栈，但我在我的计算机上 运行 所以我告诉 li 是可检查的项目..你可以看到我放在 html 代码上的 simscheckbox js 文件.. ..请帮助..
(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
</button>
</div>
对于您以后的问题，请清楚地提及您使用的插件（提供link！）...在这种情况下是 simsCheckbox.
在您的 HTML 标记中，我只是添加了 disabled 属性.
现在，disabled 是 属性，不是属性。
所以你必须使用 $('.btn_check').prop('disabled', [true/false]); 来改变它使用 jQuery.
您还必须使用 .simsCheckbox() 实例化插件，如 GitHub 页面中明确说明的那样。
现在...你只想enable/disable一个按钮...基于至少一个li检查。
正如您将在下面看到的，在 click 上它会切换 checked class。
因此，如果至少有一个 .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 (simsek97@gmail.com)
* 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 时禁用继续按钮，并在取消选中时启用，我使用 simscheckbox lib 使 li 可以选中。如您所见，我将此库放在上面的 html 代码中，但是当我单击 li item any 及其禁用和启用时如何禁用和启用它，当我再次单击其启用时，请帮助我.. .my lib 没有 运行 这个堆栈，但我在我的计算机上 运行 所以我告诉 li 是可检查的项目..你可以看到我放在 html 代码上的 simscheckbox js 文件.. ..请帮助..
(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
</button>
</div>
对于您以后的问题，请清楚地提及您使用的插件（提供link！）...在这种情况下是 simsCheckbox.
在您的 HTML 标记中，我只是添加了 disabled 属性.
现在，disabled 是 属性，不是属性。
所以你必须使用 $('.btn_check').prop('disabled', [true/false]); 来改变它使用 jQuery.
您还必须使用 .simsCheckbox() 实例化插件，如 GitHub 页面中明确说明的那样。
现在...你只想enable/disable一个按钮...基于至少一个li检查。
正如您将在下面看到的，在 click 上它会切换 checked class。
因此，如果至少有一个 .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 (simsek97@gmail.com)
* 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>