JSFiddle - React, Tailwind, and code Playground

by Rui Leite

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

var labels = document.getElementsByClassName("checkbox-proximidade");
for(var i = 0; i < labels.length; i++) labels[i].children[0].addEventListener("change", function(e){
    document.getElementById("input-" + e.srcElement.id.split("-")[1]).disabled = !this.checked;
});