Question

我希望在选择li时选中li来禁用继续按钮，并在取消选中时启用，我使用simscheckbox lib使li可以检查。我把这个lib放在上面的html代码中你可以看到，但是当我点击li item any及其禁用和启用时如何禁用和启用它，当我再次点击它的启用时，plzz帮助我...我的lib doens运行这个堆栈，但我在我的计算机上运行，所以我告诉李是可检查的项目..你可以看到我放在HTML代码的simscheckbox js文件.... plz帮助..

(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>

Answer 1

对于您将来的问题，请明确提及您使用的插件（提供链接！）......在这种情况下， simsCheckbox 。< / p>

对于HTML标记，我只是添加了disabled属性。

现在，disabled 是属性，而不是属性所以你必须使用$('.btn_check').prop('disabled', [true/false]);来改变它使用jQuery。

您还必须使用.simsCheckbox()实例化插件，如GitHub页面中明确说明的那样。

现在...... 您只想启用/禁用按钮...基于至少一个li已选中。

正如您将在下面看到的那样，click会切换checked班级因此，如果至少有一个.check也有.checked，则会启用该按钮。

<小时/> 很抱歉所有 ，但由于没有可用的CDN，我不得不从GitHub复制粘贴插件脚本。

在下面找以获得解决方案。

// 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上的按钮

1 个答案: