How to get value from bootstrap checkbox buttons in yii?

Question

I am using the yii-bootstrap extension and wanted to use the checkbox button group. Rendering it is functioning without problems, but i have no idea how to read which button was checked and which not. Is there maybe a possibility to bind each checkbox to an attribute of the model?

This is what i used so far (it's actually the exact copy from the yii-bootstrap website):

<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
  'type' => 'primary',
  'toggle' => 'radio', // 'checkbox' or 'radio'
  'buttons' => array(
    array('label'=>'Left'),
    array('label'=>'Middle'),
    array('label'=>'Right'),
  ),
)); ?>

Answer 1

You can just set IDs for each button:

<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
  'type' => 'primary',
  'toggle' => 'radio', // 'checkbox' or 'radio'
  'buttons' => array(
    array('label'=>'Left', 'url' => '#', 'linkOptions'=>array('id' => 'btn_1')),
    array('label'=>'Middle', 'url' => '#', 'linkOptions'=>array('id' => 'btn_2')),
    array('label'=>'Right', 'url' => '#', 'linkOptions'=>array('id' => 'btn_3')),
  ),
)); ?>

Answer 2

I needed this button group to choose which details are supposed to be used for filtering in a search. That's why i had some helper attributes in my model called (sticking to the naming convention in these examples) $leftSearch, $middleSearch and $rightSearch.

I wanted the buttons to stay pushed in or out depending on the choice of the user (otherwise it would get confusing because the buttons would be unpressed after every refresh but the search attributes would be stored in the hidden fields, which the user does not see). I achieved that using

'active' => ($model->leftSearch)?true:false,

Another thing was the data-value which would differ depending on what the user chose before submitting the page. That was done with:

'data-value' => ($model->leftSearch)?0:1,

The complete code in the view looks like this:

$this->widget('bootstrap.widgets.TbButtonGroup', array(
        'type' => 'primary',
        'toggle' => 'checkbox',
        'buttons' => array(
            array('label'=>'Left', 
                'active' => ($model->leftSearch)?true:false,
                'htmlOptions'=>array(
                    'data-field' => 'Model_leftSearch',
                    'data-value' => ($model->leftSearch)?0:1,
            ),),
            array('label'=>'Middle', 
                'active' => ($model->middleSearch)?true:false,
                'htmlOptions'=>array(
                    'data-field' => 'Model_middleSearch',
                    'data-value' => ($model->middleSearch)?0:1,
            ),),
            array('label'=>'Right', 
                'active' => ($model->rightSearch)?true:false,
                'htmlOptions'=>array(
                    'data-field' => 'Model_rightSearch',
                    'data-value' => ($model->rightSearch)?0:1,
            ),),
        ),
    ));
echo CHtml::activeHiddenField($model, 'leftSearch');
echo CHtml::activeHiddenField($model, 'middleSearch');
echo CHtml::activeHiddenField($model, 'rightSearch');

The javascript stays exactly the same as what frostyterrier posted

Yii::app()->clientScript->registerScript('buttonGroup', "
  $(function(){
   $('.btn-group a').click(function(){
    var fieldId = $(this).data('field');
    var value = $(this).data('value');
    $('#' + fieldId).val(value); 
   });
  });
", CClientScript::POS_END);

The only thing i don't understand about the javascript part is that it works when inserted into the view as above, but doesn't work if included in some external .js file. I presume it has something to do with POS_END, but i'm no javascript expert.

Answer 3

I checked out the source of TbButtonGroup and there doesn't seem to be a way of binding each checkbox to an attribute. However, you could use data attributes to link each button to a hidden field representing a model attribute. That's probably the next closest thing and probably also requires the least amount of code. Here's how you could do that:

PHP: Requires that you have your model stored in a variable called $model. Place within form tags. Make sure jQuery is loaded.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
  'type' => 'primary',
  'toggle' => 'radio', // 'checkbox' or 'radio'
  'buttons' => array(
    array('label'=>'Left', 'htmlOptions' => array(
        'data-field' => 'Model_left',
        'data-value' => 1,
    )),
    array('label'=>'Middle', 'htmlOptions' => array(
        'data-field' => 'Model_middle',
        'data-value' => 2,
    )),
    array('label'=>'Right', 'htmlOptions' => array(
        'data-field' => 'Model_right',
        'data-value' => 3,
    )),
  ),
));
echo CHtml::activeHiddenField($model, 'left');
echo CHtml::activeHiddenField($model, 'middle');
echo CHtml::activeHiddenField($model, 'right');

In the code above, the word Model needs to be replaced with your model name and the words left, middle, right need to be replaced with your model's attributes. The data-value needs to be set to the value you want each button to represent.

Javascript:

Yii::app()->clientScript->registerScript('buttonGroup', "
$(function(){
    $('.btn-group a').click(function(){
        var fieldId = $(this).data('field');
        var value = $(this).data('value');
        $('#' + fieldId).val(value);
    });
});
", CClientScript::POS_END);

Then you can just submit the form normally.