JSFiddle - React, Tailwind, and code Playground

by roedema

HTML

<p>
    <input type="text" id="QR~QID14#1~1~TEXT" />
    <input type="checkbox" id="QR~QID14#2~1" />
    <label for="QR~QID14#2~1">disable</label>
</p>
<p>
    <input type="text" id="QR~QID14#1~2~TEXT" />
    <input type="checkbox" id="QR~QID14#2~2" />
    <label for="QR~QID14#2~2">disable</label>
</p>
<p>
    <input type="text" id="QR~QID14#1~3~TEXT" />
    <input type="checkbox" id="QR~QID14#2~3" />
    <label for="QR~QID14#2~3">disable</label>
</p>

JavaScript

$$('input[id^="QR~QID14\\#2~"]').invoke('observe', 'change', function () {

    var text = $(this).previous('input[type="text"]');

    if ($(this).checked === true) {
        $(text).value = '';
        $(text).disabled = true;
    } else {
        $(text).disabled = false;
    }

});