禁用/啟用文本框（取決於復選框）

Question

我正在使用cakePHP框架來處理我的項目。

如何在選中復選框時啟用文本框，而在未選中復選框時將其禁用？ 我嘗試使用javascript，但無法正常運行，我認為這是因為我的“ 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");
            }
        }
    

*警報僅供測試。 它會轉到適當的塊，但不會啟用/禁用文本字段。 你知道為什么嗎？

Answer 1

通過dfault cakephp將id分配給任何具有常規約定的元素，即UsersMenuItemId （我假設用戶是您的模型）。 但是您可以將id與其他htmlOptions一起分配

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>

Answer 2

在復選框數組=>添加

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

如果此關鍵字不適合您，則將其替換為復選框ID“ menu_item_id”

然后編寫normail javascript函數以禁用輸入框

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

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

在這里，您聲明為“ 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在頁面上必須是唯一的。