javascript - 停用 Bootstrap 事件标签单击

Question

我有几个组，可以选择三个按钮。我试图做到这一点，以便当有人选择 N/A 按钮时，它会禁用其他两个按钮。当取消选择 N/A 按钮时，将启用其他两个按钮。我让它在我的机器上工作，其他两个按钮被着色为禁用，并且正确设置了“禁用”属性。问题是，仍然可以单击按钮/标签并将标签设置为事件状态。

我无法让我的 JSFiddle 像在我的机器上一样运行。它不会在初始 N/A 单击时禁用其他两个按钮，但它可能只是 JSFiddle 的东西。这是我的代码，如果您想在自己的机器上尝试:

https://jsfiddle.net/trout0525/huz8macm/7/

<div id="plan-wrapper">
    <div class="row plan-title-row">
        <div class="col-lg-6" id="plan-title">
            Loading...
        </div>
        <div class="col-lg-6">
            <div class="pull-right" id="countdown">
                Countdown
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default" style="margin-bottom: 4px;">
                <div class="panel-body">
                    <div class="row" id="master-progress">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="plan-file-title" style="margin: 0 0 4px 5px;"></div>
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a data-toggle="tab" href="#planTeam">Team</a></li>
                <li role="presentation" class=""><a data-toggle="tab" href="#planResources">Resources</a></li>
                <li role="presentation" class=""><a data-toggle="tab" href="#planStatus">Status</a></li>
            </ul>
            <div class="tab-content" style="background-color: white; padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
                <div id="planTeam" class="tab-pane fade in active">
                </div>
                <div id="planResources" class="tab-pane fade">
                </div>
                <div id="planStatus" class="tab-pane fade">
                </div>
            </div>
        </div>
    </div>
</div>

任何帮助都会很棒。

Answer 1

在 JSFiddle 上完成它，删除拼写错误并通过开发者控制台进行调试，但它目前使用 Chrome，而不是 IE:

https://jsfiddle.net/trout0525/huz8macm/9/

$(".btn-group .btn").on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();

    var $selectedButton = $(this),
        $panelDefault = $selectedButton.closest('.panel-default'),
        $controlPanel = $panelDefault.find('.panel-heading .pull-right'),
        parent = $selectedButton.closest('.panel-default').attr('data-stepId'),
        stepId = $selectedButton.closest('li').attr('id'),
        spcStat = $selectedButton.attr('id').match(/^(.*?)\d+$/)[1];

    var buttonIsActive = $selectedButton.hasClass('active'),
        buttonIsDisabled = $selectedButton.attr('disabled');

    if ( buttonIsActive || buttonIsDisabled ) {
        $selectedButton.removeClass('active');
    } else {
        $selectedButton.addClass('active');
    }

    if ($selectedButton.hasClass('not-applicable')) {
        var naIsActive = $selectedButton.hasClass('active'),
            allButtons = $selectedButton.closest('.btn-group');

        if (naIsActive) {
            $selectedButton.siblings().removeClass('active');
            $(allButtons)
                .find('.btn_draft_complete')
                .attr('disabled', 'disabled')
                .attr('title', 'Disabled. To enable: deselect N/A for this substep')
                .find('input')
                .css('point-events', 'auto');
            $(allButtons)
                .find('.btn_done')
                .attr('disabled', 'disabled')
                .attr('title', 'Disabled. To enable: deselect N/A for this substep')
                .find('input')
                .css('point-events', 'auto');
        } else {
            $(allButtons)
                .find('.btn_draft_complete')
                .removeAttr('disabled')
                .attr('title', 'Mark step as Draft Complete')
                .find('input')
                .removeAttr('disabled')
            $(allButtons)
                .find('.btn_done')
                .removeAttr('disabled')
                .attr('title', 'Mark step as Draft Complete')
                .find('input')
                .removeAttr('disabled')
        }
    }
});