読者です 読者をやめる 読者になる 読者になる

Javascriptでチェックボックスとテキストボックスの状態を連動させる方法

チェックボックスのチェック状態とテキストボックスの入力可否を連動させる方法を ググったけどよく分からなかったので、自前でその方法を考えてみた。

HTML
<input name="target-checkbox" type="checkbox" id="target_check_0" value="target_num_0">
<input id="target_num_0" type="number" disabled>
<input name="target-checkbox" type="checkbox" id="target_check_1"  value="target_num_1">
<input id="target_num_1" type="number" disabled>
Javascript
$('[name=target-checkbox]').change(function() {
    var value = $(this).val();
    $('#' + value).prop('disabled', !$(this).prop('checked'));
});

チェックボックスのvalue値とテキストボックスのIDを紐付けて制御する。

チェックボックスとテキストボックスの組み合わせが複数あったとしても、 チェックボックスが同じname属性を持てば、同じ様に制御できる。

もっと最適な実装があればそちらに差し替えたい。