2016-09-06 12 views
0

データベースからデータのリストを取得しましたが、チェックボックスをオンにして入力フィールドを有効にします。しかし、その最初の行だけで動作します。ここではHTMLコードは次のとおりです。チェックボックスがチェックボックスのチェックボックスにチェックされた後に入力フィールドを有効にします

<?php 
    require_once('inc/config.php'); 
    include 'verification/verify_form_details.php'; 
?> 
<html> 
<head> 
    <title>getElementById example</title> 
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
</head> 
<body> 
    <?php 
     $result2 = getProcessID(); 
    ?> 
    <label>Process: <small style="color:red;">*</small>    
    <?php 
     while ($row = mysql_fetch_array($result2)) 
     { 
      $row[0] = cleanOutputData($row[0]); 
    ?>  
    <div>  
     <label> 
     <input type="checkbox" class="checkbox" name="process[]" id=<?php echo $row[0] ?> value=<?php echo $row[0]?> /><?php echo $row[0] ?> 
     </label>           

     <label> 
     <input type="text" class="field" disabled name="number[]" id=<?php echo $row[0] ?> /> 
     </label> 

    </div> 
    <?php 
     } 
     mysql_free_result($result2); 
    ?> 
    </label> 
</body> 
</html> 

とJavaScript機能:

<script> 
    $(document).ready(function() { 
      $('.checkbox').change(function() { 
       $('.field').attr('disabled',!this.checked) 
      }); 
    }); 
</script> 

すべてのアイデアは、私はそれを行うことができますか?あなたは

+0

ので、同じ 'ID'の使用クラスを参照していただき、ありがとうございます。 IDは一意でなければなりません – guradio

+0

@guradioクラスを試してみました。私の質問も編集しました –

+0

'$(this).parent()。next()。find( '.field')。attr( 'disabled'、!this.checked)' – guradio

答えて

4

$('.checkbox').change(function() { 
 
    $(this).parent().next().find('.field').prop('disabled', !$(this).is(':checked')) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" class="checkbox" name="process[]" id=v alue=/> 
 
</label> 
 

 
<label> 
 
    <input type="text" class="field" disabled name="number[]" id=/> 
 
</label> 
 

 

 
<label> 
 
    <input type="checkbox" class="checkbox" name="process[]" id=v alue=/> 
 
</label> 
 

 
<label> 
 
    <input type="text" class="field" disabled name="number[]" id=/> 
 
</label> 
 

 

 
<label> 
 
    <input type="checkbox" class="checkbox" name="process[]" id=v alue=/> 
 
</label> 
 

 
<label> 
 
    <input type="text" class="field" disabled name="number[]" id=/> 
 
</label>

  1. 使用クラスの代わりに、ID
  2. 使用この文脈ではなく、変更された要素
関連する問題