JSFiddle - React, Tailwind, and code Playground

by André Masson

HTML

<select name="organismCaSelect">
    <option value="">--</option>
    <option value="4">9387349867</option>
    <option value="6">8475658723</option>
</select>
<br />
<br />
<br />Numéro d'organisme:
<input size="5" type="text" name="organismNumber" value="test this" />
<br />Nom fichier:
<input size="5" type="text" name="fileNumber" value="test this 2" />
<br />Institution:
<input size="5" type="text" name="institution" value="815" />
<br />Transit:
<input size="5" type="text" name="transit" value="48576" />
<br />Compte:
<input size="5" type="text" name="account" value="8745-56985-77" />
<br />

JavaScript

$("select[name='organismCaSelect']").change(function () {
    var selectedOrganismId = $("select[name='organismCaSelect'] option:selected").index();

    if (selectedOrganismId === 0) {
        // Enable all other fields
        toggleEnableFields(true);
    } else {
        // Disable other fields when an existing organism is selected
        toggleEnableFields(false);
    }
});

function toggleEnableFields(enableFlag) {
    var fields = ["organismNumber", "fileNumber", "institution", "transit", "account"];
    for (i = 0; i < fields.length; i++) {
        var selector = "input[type='text'][name='" + fields[i] + "']";
        $(selector).prop("disabled", !enableFlag);
    }
}