javascript - 有没有 Yii 小部件 "Radio Button Set "？

Question

我在我的项目中使用 bootstrap，我想要一个单选按钮集，如下面的 link 所示。 .

<?php $radio = $this->beginWidget('zii.widgets.jui.CJuiButton', array(
'name'=>'checkbox-btn',
'buttonType'=>'buttonset',
'htmlTag'=>'span',
)); ?>
<input type="checkbox" id="check1" value="1" /><label for="check1">Checkbox 1</label>
<input type="checkbox" id="check2" value="2" /><label for="check2">Checkbox 2</label>
<input type="checkbox" id="check3" value="3" /><label for="check3">Checkbox 3</label>
<?php $this->endWidget();?>

但这似乎不起作用，它呈现为普通的 radioButtonList 不确定表情符号 我在 yiistrap、yiiwheels、zii 和 yiibooster 中搜索，但找不到与此“ radio 作为按钮”类似的小部件。 我应该为此包含 jquery ui 吗？我更喜欢使用已经存在的小部件。 有什么建议吗？

Answer 1

这是一个有点重的 html 部分，但确实有效:

$($('#radio-btn').children()).click(function(){
    var input = $(this).is('input');
    input = input ? $(this).next() : $(this);
    $('.ui-state-active').removeClass('ui-state-active');
    input.addClass('ui-state-active');
    $('input').prop('checked','false');
    input.prev().prop('checked','true');
});

<script src="http://demo.bsourcecode.com/yiiframework/assets/7c93f9e4/jui/js/jquery-ui.min.js"></script>
<link href="http://demo.bsourcecode.com/yiiframework/assets/7c93f9e4/jui/css/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radio-btn" name="radio-btn" class="ui-buttonset">
    <input type="radio" id="radio1" name="radio" value="1" class="ui-helper-hidden-accessible">
    <label for="radio1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Choice 1</span>
    </label>
    <input type="radio" id="radio2" name="radio" value="2" class="ui-helper-hidden-accessible">
    <label for="radio2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Choice 2</span>
    </label>
    <input type="radio" id="radio3" name="radio" value="3" class="ui-helper-hidden-accessible">
    <label for="radio3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false"><span class="ui-button-text">Choice 3</span>
    </label>
</div>