javascript – 有时我需要再次点击我的一个引导复选框按钮.为什么？

这种工作占60％的时间.但有时我需要再次点击一个按钮.当然,这不会在真实的网络世界中飞翔.我正在使用一个改进的bootstrap-min,这可能是禁止另一种风格的按钮.想象一下它们与“data-color = primary”相同. “data-color = icomold”是唯一的补充.

以下是您排除故障的重要部分：
按钮……

            <tr>
            <td colspan="5">
                <span class="button-checkBox">
                    <button type="button" class="btn" data-color="icomold">Injection Mold</button>
                    <input type="checkBox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkBox">
                    <button type="button" class="btn" data-color="icomold">Export Mold</button>
                    <input type="checkBox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkBox">
                    <button type="button" class="btn" data-color="icomold">CNC Plastic</button>
                    <input type="checkBox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkBox">
                    <button type="button" class="btn" data-color="icomold">CNC Metal</button>
                    <input type="checkBox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkBox">
                    <button type="button" class="btn" data-color="icomold">Urethane Casting</button>
                    <input type="checkBox" class="hidden" />
                </span>
            </td>
        </tr>

然后这是脚本片：

        $(function() {
        $('.button-checkBox').each(function() {

            // Settings
            var $widget = $(this),
        $button = $widget.find('button'),
        $checkBox = $widget.find('input:checkBox'),
        color = $button.data('color'),
        settings = {
            on: {
                icon: 'glyphicon glyphicon-check'
            },
            off: {
                icon: 'glyphicon glyphicon-unchecked'
            }
        };

            // Event Handlers
            $button.on('click', function() {
                $checkBox.prop('checked', !$checkBox.is(':checked'));
                $checkBox.triggerHandler('change');
                updatedisplay();
            });
            $checkBox.on('change', function() {
                updatedisplay();
            });

            // Actions
            function updatedisplay() {
                var isChecked = $checkBox.is(':checked');

                // Update the button's color
                    if (isChecked) {
                        //We've activated one
                        //Now we need to deactivate the rest of the buttons
                        //var elm = document.createElement("div");
                        var y = document.getElementsByClassName('btn btn-icomold active');
                        var aNode = y[0];
                        if (typeof (aNode) != "undefined" && $button.context.innerText != aNode.innerText) 
                        {
                            aNode.className = "btn btn-default";
                            var state = aNode.childNodes[0]
                            state.className = "state-icon glyphicon glyphicon-unchecked";
                        }

                        $button
                        .removeClass('btn-default')
                        .addClass('btn-' + color + ' active');

                    }
                    else {
                        $button
                        .removeClass('btn-' + color + ' active')
                        .addClass('btn-default');
                    }

                    // Set the button's state
                    $button.data('state', (isChecked) ? "on" : "off");

                    // Set the button's icon
                    $button.find('.state-icon')
                    .removeClass()
                    .addClass('state-icon ' + settings[$button.data('state')].icon);
            }

            // Initialization
            function init() {

                updatedisplay();

                // Inject the icon if applicable
                if ($button.find('.state-icon').length == 0) {
                    $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
                }
            }
            init();
        });
    });

解决方法:

这是修复.

 function updatedisplay(from) {
            var isChecked = $checkBox.is(':checked');
            isChecked = from;

所以对于我的目的,我不在乎原始价值是什么.
在Init和一个事件我发送它需要改变的东西.

// Initialization
        function init() {

            updatedisplay(false);

初始化时为假…而“点击”事件为真.为了我的目的：没有理由有一个unlick事件.

// Event Handlers
        $button.on('click', function() {
            $checkBox.prop('checked', !$checkBox.is(':checked'));
            $checkBox.triggerHandler('change');
            updatedisplay(true);
        });

感谢Dossy强调Updatedisplay发生了两次.
这一部分需要注释掉：

    //$checkBox.on('change', function() {
    //          updatedisplay();
    //    });