Question

我正在使用Bootstrap 3并使用单选按钮组

<div class="form-group required">
    <label for="option1" class="control-label col-md-4">Option 1</label>
    <div class="col-md-6">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn">
                <input id="opt1-yes" name="option1" type="radio" value="1"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Yes</span>
            </label>
            <label class="btn">
                <input id="opt1-no" name="option1" type="radio" value="0"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> No</span>
            </label>
        </div>
    </div>
</div>
<div class="form-group required">
    <label for="option2" class="control-label col-md-4">Option 2</label>
    <div class="col-md-6">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn">
                <input id="opt2-yes" name="option2" type="radio" value="1"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Yes</span>
            </label>
            <label class="btn">
                <input id="opt2-no" name="option2" type="radio" value="0"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> No</span>
            </label>
        </div>
    </div>
</div>

Jquery的

$('input[type=radio][name=option2]').change(function() {      
    if($('#opt2-yes').is(':checked')) {
        $('input[type="radio"][name="option1"]').attr('disabled', true).parent('.btn').addClass('disabled');
        $('#opt1-no').prop('checked', true);
        $('#opt1-yes').parent('.btn').removeClass('active');
        $('#opt1-no').parent('.btn').addClass('active');
    }
    else {
        $('input[type="radio"][name="option1"]').attr('disabled', false).parent('.btn').removeClass('disabled');
    }
});

假设我将第一个单选按钮选项设置为“是”，将第二个选项设置为“是”，第一个选项应更改为“否”并被禁用。这似乎可以工作到我能看到但如果我点击第一组，我可以更改选项，即使他们被禁用

我在https://jsfiddle.net/tux7cftm/创建了一个小提琴，以便您可以看到问题

任何帮助表示赞赏

Answer 1

将以下CSS添加到样式表

.disabled {
  pointer-events: none;
}

参考CSS pointer-events

已禁用的单选按钮仍可单击

1 个答案: