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

时间:2013-04-29 09:06:42

标签: javascript cakephp cakephp-2.0

我正在使用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
                            )
                        );
 

顺便说一句,我是cakePHP和Javascript的初学者。感谢。

我做了一些改变。在我的脚本中,我添加了这个

 

    
        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");
            }
        }
    

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

3 个答案:

答案 0 :(得分:1)

通过dfault cakephp为任何具有正常约定UsersMenuItemId的元素分配id(我假设用户是你的模型)。但是你可以用其他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>

答案 1 :(得分:0)

复选框 array =&gt;添加

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

如果关键字不适合您,请将其替换为复选框ID'menu_item_id'

然后编写normail javascript函数来禁用inputbox <击>

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

单行JS是使用下面的行,它将在两个状态之间切换

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

<击>

更新:检查以下代码是否适合您

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

答案 2 :(得分:0)

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

这里您声明'menu_item_id'的第一个字段是表名,或者我们可以说模型名称。

将id分配给输入有不同的选项,如:

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

但请注意,ID必须在页面上唯一。