Question

以下是我在JOOMLA扩展程序中尝试使用的引导单选按钮。

<fieldset id="myEdit" class="radio btn-group">
                  <input type="radio" id="myEdit0" value="0">
                  <label for="myEdit0" class="btn active btn-danger">Yes</label>
                  <input type="radio" id="myEdit1" value="1">
                  <label for="myEdit1" class="btn">No</label>
 </fieldset>

enter image description here

当我点击YES时这个按钮工作正常但是当我点击NO时它变得完全没有反应。我的单选按钮的其他方式只能工作一次。。。但是我复制了这个html JOOMLA全局配置窗口，它在那里工作正常。

预期有用的回应

Answer 1

好吧，我在JOOMLA管理员端的template.js中找到了以下js代码。并通过改变html如下工作

<fieldset id="myEdit" class="radio btn-group">
                                        <input type="radio" id="myEdit0" value="1" name="myEdit">
                                        <label for="myEdit0" class="btn">Yes</label>
                                        <input type="radio" id="myEdit1" value="0" name="myEdit">
                                        <label for="myEdit1" class="btn btn-danger">No</label>
</fieldset>

template.js

$(document).ready(function()
{
    $('*[rel=tooltip]').tooltip()

    // Turn radios into btn-group
    $('.radio.btn-group label').addClass('btn');
    $(".btn-group label:not(.active)").click(function()
    {
        var label = $(this);
        var input = $('#' + label.attr('for'));

        if (!input.prop('checked')) {
            label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
            if (input.val() == '') {
                label.addClass('active btn-primary');
            } else if (input.val() == 0) {
                label.addClass('active btn-danger');
            } else {
                label.addClass('active btn-success');
            }
            input.prop('checked', true);
        }
    });
    $(".btn-group input[checked=checked]").each(function()
    {
        if ($(this).val() == '') {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
        } else if ($(this).val() == 0) {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
        } else {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
        }
    });
})

Answer 2

很难找到合适的文档，并且类似的结果似乎更像是bootstrap 3兼容的。这是在joomla 3.5前端工作。

    <fieldset class="radio btn-group">
        <label class="btn btn-default btn-danger" for="feedback0" >
        <input type="radio" id="feedback0" value="0" name="feedback" checked="checked">No</label>
        <label class="btn btn-default" for="feedback1">
        <input type="radio" id="feedback1" value="1" name="feedback">Yes</label>
    </fieldset>

JOOMLA中的bootstrap单选按钮不能正常工作？

2 个答案: