JSFiddle - React, Tailwind, and code Playground

by thallysondias

HTML

<!--PRÓXIMIDADE -->
                <h1>Próximidade</h1>
                <p class="explicacao">Caso deseje, indique a distância do seu hotel às seguintes atrações</p>
                <div class="large-12 columns field-form">

                    <div class="large-6 columns">
                        <div class="row collapse">
                            <div class="small-4 columns">
                                <label class="checkbox-proximidade"><input type="checkbox" id="check-praia"> Praia </label>
                            </div>
                            <div class="small-8 columns">
                                <input type="text" placeholder="Distância" id="input-praia" disabled >
                            </div>
                        </div>
                    </div>
                    <div class="large-6 columns">
                        <div class="row collapse">
                            <div class="small-4 columns">
                                <label class="checkbox-proximidade"><input type="checkbox" id="check-igreja">Igreja </label>
                            </div>
                            <div class="small-8 columns">
                                <input type="text" placeholder="Distância" id="input-igreja" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="large-6 columns">
                        <div class="row collapse">
                            <div class="small-4 columns">
                                <label class="checkbox-proximidade"><input type="checkbox" id="check-mercado"> Mercado Local </label>
                            </div>
                            <div class="small-8 columns">
                                <input type="text" placeholder="Distância" id="input-mercado" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="large-6...

JavaScript

document.getElementById('check-praia').onchange = function() {
    document.getElementById('input-praia').disabled = !this.checked;
};
document.getElementById('check-igreja').onchange = function() {
    document.getElementById('input-igreja').disabled = !this.checked;
};
document.getElementById('check-mercado').onchange = function() {
    document.getElementById('input-mercado').disabled = !this.checked;
};

document.getElementById('check-shopping').onchange = function() {
    document.getElementById('input-shopping').disabled = !this.checked;
};

document.getElementById('check-golfe').onchange = function() {
    document.getElementById('input-golfe').disabled = !this.checked;
};

document.getElementById('check-restaurante').onchange = function() {
    document.getElementById('input-restaurante').disabled = !this.checked;
};

document.getElementById('check-aeroporto').onchange = function() {
    document.getElementById('input-aeroporto').disabled = !this.checked;
};

document.getElementById('check-museu').onchange = function() {
    document.getElementById('input-museu').disabled = !this.checked;
};

document.getElementById('check-museu').onchange = function() {
    document.getElementById('input-museu').disabled = !this.checked;
};



document.getElementById('check-teatro').onchange = function() {
    document.getElementById('input-rodoviaria').disabled = !this.checked;
};

document.getElementById('check-metro').onchange = function() {
    document.getElementById('input-metro').disabled = !this.checked;
};