繰り返しJavaScriptを避ける

Question

私は約30の類似した行を持つHTMLフォームを持っています。各行は、このようなものです：チェックボックスがチェックされていない場合

<tr> 
    <td>Car Park</td> 
    <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td> 
    <td><input type="text" id="local_parking_t" name="amenity_text[]" value="Car park"></td> 
</tr> 

、テキストボックスには、次のMySQLのクエリにその値を渡し、それを避けるために無効にする必要があります。私はこのJavaScriptで1行のためにそれを行うことができます。

document.getElementById('local_parking').onchange = function() { 
    document.getElementById('local_parking_t').disabled = !this.checked; 
}; 

それは異なるIDでオーバーjavascriptの30回を繰り返すことは不当に厄介なようだが。より良い方法がありますか？

Answer 1

キャッチすべてのcheckboxとchangeイベントリスナーをバインドします。ユーザのチェックがcheckboxと指定されている場合は、対応するtext入力を有効にします。完璧に動作

var checkboxes = document.querySelectorAll('input[type=checkbox]'), 
 
    inputs = document.querySelectorAll('input[type=text]'); 
 
    
 
    [...checkboxes].forEach((v,i) => v.addEventListener('change', function(){ 
 
     inputs[i].disabled = !this.checked; 
 
    }));

<tr> 
 
    <td>Car Park</td> 
 
    <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" id="local_parking_t" disabled name="amenity_text[]" value="Car park"></td> 
 
</tr> 
 
<br> 
 
<tr> 
 
    <td>Some txt</td> 
 
    <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" id="local_parking_t" disabled name="amenity_text[]" value="Car "></td> 
 
</tr>

Answer 2

共通のクラスを使用してCHECKBOX要素をターゲティングし、DOMトラバーサルメソッドを使用してINPUT要素を対象とすることができます。

var elements = document.querySelectorAll('.local_parking'); 
 
elements.forEach(function(element) { 
 
    element.addEventListener('change', function() { 
 
    this.parentNode.nextElementSibling.childNodes[0].disabled = !this.checked; 
 
    }); 
 
});

<table> 
 
    <tr> 
 
    <td>Car Park</td> 
 
    <td><input type="checkbox" class="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" class="local_parking_t" name="amenity_text[]" value="Car park" disabled></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Car Park</td> 
 
    <td><input type="checkbox" class="local_parking" name="amenity[]" value="local_parking"></td> 
 
    <td><input type="text" class="local_parking_t" name="amenity_text[]" value="Car park" disabled></td> 
 
    </tr> 
 
</table>