javascript - 根据复选框禁用/启用文本框

Question

我正在使用 cakePHP 框架来处理我的项目。

如何在选中复选框时启用文本框，并在未选中复选框时禁用它？我尝试了 javascript，但它不起作用，我认为这是因为我的“id”。我应该如何声明我的“id”？

这是我的代码。它位于 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");
            }
        }
    

*警报用于测试。它转到正确的 block ，但它没有启用/禁用文本字段。你知道为什么吗？

Answer 1

默认 cakephp 将 id 分配给具有正常约定的任何元素，即 UsersMenuItemId (我假设 users 是您的模型)。但是您可以使用其他 htmlOptions 分配 id，例如

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,
                                )
                            );

现在编写一个基本脚本:

<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>