CakePHP: multiple checkbox with different html attribute

Question

Here is the situation:

i have table stages having following structure

 | id              |  name                                         | editable|
 -----------------------------------------------------------------------------
 | open            | Open                                          |    1    | 
 | paysheet_review | Paysheet Submitted (Awaiting Office Approval) |    0    | 
 | to_pay          | Paysheet Approved (Awaiting Payment)          |    0    | 
 | paid            | Paid                                          |    1    | 
 | purgatory       | Flip or Refund                                |    0    | 
 | closed          | Deal Closed                                   |    1    |
 -----------------------------------------------------------------------------

I am creating a multiple checkbox block by

In Controller

<?php $_stages = $this->Stage->find("list");?>

In View

<?php echo $this->Form->input("stage", array("multiple" => "checkbox", "options" => $_stages));?>

which creates following html

<div class="control-group">
 <label class="control-label" for="DealStage">Stage</label>
   <input type="hidden" value="" id="DealStage_" name="data[Deal][stage]">
 <div class="controls">
    <label class="checkbox"><input type="checkbox" id="DealStageOpen" value="open" name="data[Deal][stage][]">Open</label>
    <label class="checkbox"><input type="checkbox" id="DealStagePaysheetReview" value="paysheet_review" name="data[Deal][stage][]">Paysheet Submitted (Awaiting Office Approval)</label>
    <label class="checkbox"><input type="checkbox" id="DealStageToPay" value="to_pay" name="data[Deal][stage][]">Paysheet Approved (Awaiting Payment)</label>
    <label class="checkbox"><input type="checkbox" id="DealStagesPaid" value="paid" name="data[Deal][stage][]">Paid</label>
    <label class="checkbox"><input type="checkbox" id="DealStagePurgatory" value="purgatory" name="data[Deal][stage][]">Flip or Refund</label>
    <label class="checkbox"><input type="checkbox" id="DealStageClosed" value="closed" name="data[Deal][stage][]">Deal Closed</label>
  </div>
</div>

Now I want to pass the editablefrom Database column as a title for each checkbox. Is there any way that we create a multiple checkbox in CakePHP and add a title as attribute to each input type checkbox. so that I can use jQuery to check OR uncheck only editable Stages.

Answer 1

Generate individual checkboxes

There's no means to give individual attributes to a checkbox if they are generated in one call, however it's easily achievable generating each checkbox individually. To do so ensure that the stages data is passed to the view:

// in Controller action
$stages = $this->Stage->find("all");
$this->set('stages', $stages);

And in the view simply iterate over the $stages variable to generate checkboxes:

// in view file
foreach ($stages as $stage) {
     $id = $stage['Stage']['id'];
     $name = $stage['Stage']['name'];
     $editable  = $stage['Stage']['editable'];

     echo $this->Form->input(
         'Deal.stage.' . $id,
         ['value' => $id, 'label' => $name, 'type' => 'checkbox', 'data-editable' => $editable]
     );
}

I don't quite follow what you want to do with this editable property - but to access it from js it would then be:

// in js file
$('input[type=checkbox]'].each(function() {
    var editable = $(this).data('editable');

    ...
});

Answer 2

Unfortunately, I can't find a way to add attributes to $options like you want. What I normally do is just do that part "by hand", forget the FormHelper and write old html.

If that's not an option for you and you want to keep using Formhelper for that, then I can suggest a js approach.

First you need to change the find('list') for a find('all') to get the editable attribute.

<?php $_stages = $this->Stage->find("all");?>

and pass it to the view. Now, in the view you need to modify the array so it looks like the old one

<?php 
   $stageHelper = array();
   foreach($_stages as $stage)
      $stageHelper[$stage['Stage']['id']] = $stage['Stage']['name'];
   echo $this->Form->input("stage", array("multiple" => "checkbox", "options" => stageHelper));
?>

So far you have the same thing you have now. This is where js comes in. In the view, at the bottom preferably, add something like

<script type="text/javascript">
    $(function() {
        var stages = <?=json_encode($_stages);?>;

        $('name="data[Deal][stage][]"').each(function() {
            var currentElement = $(this);
            var value = currentElement.val();

            //compare value of checkbox with json variable
            for(var i in stages)
               if(stages[i].Stage.value == value) {
                  //add title attribute to the element if we have a match
                  currentElement.attr('title', stages[i].Stage.editable);
               }
        });
    });
</script>

Something along that lines should do.

Personally I find it less complicated to do it with html only. But there's an alternative approach to do it if you want one.

Answer 3

This type of solution you want is not exists in CakePHP right now. But you could create a new Form Helper i mean Custom method in Helper to override this method and create a new attribute in helper method like:

<?php echo $this->MyForm->input("stage", array("multiple" => "checkbox", "options" => $_stages, 'editable' => $editables));?>

For which you can get editable options using another find('list', array('fields' => array('id', 'editable') ));