disable/enable text-box depending on check-boxes

Question

I'm using cakePHP framework to work on my project.

How do I enable a textbox when a the checkbox is check, and disable it when it's unchecked? I tried javascript but it isn't working and I think it is because of my 'id'. How should I declare my 'id'?

Here is my code. It is in a forLoop.

echo $this->Form->checkbox('menu_item_id',
                            array(
                                    'value' => $items[$i]['MenuItem']['menu_item_id'],
                                    'hiddenField' => false,
                                    'name' => 'data[OrderItem][menu_item_id][]',
                                    'label' => false,
                                    'div' => false,
                                    )
                                ); 

echo $this->Form->input('quantity', 
                        array(
                            'style'=>'width:65px; height:25px;',
                            'name' => 'data[OrderItem][quantity][]',
                            'div' => false,
                            'label' => false
                            )
                        );

echo $this->Form->input('notes', 
                        array(
                            'style'=>'width:65px; height:25px;',
                            'name' => 'data[OrderItem][notes][]',
                            'div' => false,
                            'label' => false
                            )
                        );

By the way, I am a beginner both in cakePHP and Javascript. Thanks.

I made some changes. In my script, I added this

    
        function changeStatus(){
            if(document.getElementById("my_checkbox").checked == true){
                document.getElementById("input_field").disabled= false;
                alert('a');
            } else {
                document.getElementById("input_field").disabled= true;
                alert("B");
            }
        }
    

*alerts are for testing. it goes to the proper block, but it does not enabled/disabled the textfield. Do you have any idea why?

Answer 1

By dfault cakephp assigns id to any element with normal convention which is UsersMenuItemId (I am assuming users is your model here). But you can assign id with other htmlOptions like

echo $this->Form->checkbox('menu_item_id',
                        array(
                                'id' => 'my_checkbox',
                                'value' => $items[$i]['MenuItem']['menu_item_id'],
                                'hiddenField' => false,
                                'name' => 'data[OrderItem][menu_item_id][]',
                                'label' => false,
                                'div' => false,
                                )
                            );

Now write a basic script:

<script>
  $(document).ready(function(){
      $('#my_checkbox').event('click', function(){
          if($('#my_checkbox').is(':checked')){
             $('#input_field').removeAttr('disabled');                 
          } else {
             $('#input_field').attr('disabled','disabled');
          }
      });
  });
</script>

Answer 2

In checkbox array => add

"onclick'=>'changeStatus(this);"

if this keyword not works for you then replace that with checkbox id 'menu_item_id'

then write normail javascript function to disable inputbox

 
 
 
 
  
  
  function changeStatus(obj){ if(obj.checked){ document.getElementById("quantity").disabled =true; }
 
 
  

Single line JS is to use below line, it will toggle between two states

 
 
 
 
  
  
  document.getElementById("quantity").disabled =obj.checked;
 
 
  

Update : Check whether the below code working for you

 echo $this->Form->checkbox('menu_item_id_'.$i, array( 'value' => $items[$i]['MenuItem']['menu_item_id'], 'hiddenField' => false, 'name' => 'data[OrderItem][menu_item_id][]', 'label' => false, 'div' => false, "onclick'=>'changeStatus(this,$i);" ) ); echo $this->Form->input('quantity_'.$i, array( 'style'=>'width:65px; height:25px;', 'name' => 'data[OrderItem][quantity][]', 'div' => false, 'label' => false ) ); function changeStatus(obj,index){ document.getElementById("quantity_"+index).disabled = ! obj.checked; } 

Answer 3

echo $this->Form->checkbox('menu_item_id',
                            array(
                                    'value' => $items[$i]['MenuItem']['menu_item_id'],
                                    'hiddenField' => false,
                                    'name' => 'data[OrderItem][menu_item_id][]',
                                    'label' => false,
                                    'div' => false,
                                    )
                                ); 

here first field you declared 'menu_item_id' is for table name or we can say model name.

there is different option for assigning id to input like:

echo $this->Form->checkbox('modelname',
                                array(
                                        'value' => $items[$i]['MenuItem']['menu_item_id'],
                                        'hiddenField' => false,
                                        'name' => 'data[OrderItem][menu_item_id][]',
                                        'label' => false,
                                        'div' => false,
                                        'id'=>'your-id'
                                        )
                                    ); 

but keep in mind that id must be unique on the page.