{% extends "global/Page.html" %}
{% load otree %}

{% block content %}

        <div class="form-group">
            <div class="col-lg-3">
                <label class="control-label left">Wer bist du?</label>
                <select class="form-control" id="Werbistdu">
                    <option value="0">Simon</option>
                    <option value="1">Fabian</option>
                </select>
            </div>
            <div class="col-lg-4">
                <!-- JS not working yet to disable only if no selected in rdclass box -->
                <label class="control-label"><br/>&nbsp;Simon: Wie viel wiegst du?</label>
                <input class="form-control" value="None" id="Simon" required>
            </div>
            <div class="col-lg-4">
                <!-- JS not working yet to disable only if no selected in rdclass box -->
                <label class="control-label"><br/>&nbsp;Fabian: Wie viel wiegst du?</label>
                <input class="form-control" value="None" id="Fabian" required>
            </div>
        </div>


    <script>
        var select = document.getElementById('Werbistdu'), input = document.getElementById("Simon");
        document.addEventListener("DOMContentLoaded", function(event) {
            if (select.value == '1') {
                input.disabled = true;
            } else {
                input.disabled = false;
            }
        });

        select.onchange = function() {
            if (this.value == '1') {
                input.disabled = true;
            } else {
                input.disabled = false;
            }
        }
    </script>

    <script>

        var select = document.getElementById('Werbistdu'), input = document.getElementById("Fabian");
        document.addEventListener("DOMContentLoaded", function(event) {
            if (select.value == '0') {
                input.disabled = true;
            } else {
                input.disabled = false;
            }
        });

        select.onchange = function() {
            if (this.value == '0') {
                input.disabled = true;
            } else {
                input.disabled = false;
            }
        }

    </script>

{% next_button%}

{% endblock %}