Проблема в том, что javascript не может быть применен в зависимости от того, является ли параметр URL

Есть выпадающий список (опция выбора) для выбора того, является ли is_recruiting, радио опция для выбора 'Total' или 'Period', и тег ввода 'from_date' и 'to_date' для установки даты при выборе 'Period'.

Когда радиоопция центрирована и выбрано 'Total', тег ввода даты блокируется, и можно выбрать опцию рекрутинга. И наоборот, если выбран 'Период', опция набора блокируется и может быть установлен период(from_date & to_date).

<form action="/chart" method="GET">
    <select name="is_recruiting" id="is_recruiting" class="ml-4">
        <option value="A" {% if is_recruiting == "A" %} selected {% endif %}>A</option>
        <option value="B" {% if is_recruiting == "B" %} selected {% endif %}>B</option>
        <option value="ALL" {% if is_recruiting == "ALL" %} selected {% endif %}>ALL</option>
    </select>
    <div class="radio" style="display: inline">
      <label><input type="radio" name="optionRadios" value="total" {% if option_radio != 'period' %} checked {% endif %}/> Total </label>
    </div>
    <div class="radio" style="display: inline">
      <label><input type="radio" name="optionRadios" value="period" {% if option_radio == 'period' %} checked {% endif %}/> Period : </label>
        <input autocomplete="off" class="datepicker" name="from_date" id="fromDate" value={{from_date|default_if_none:''}}>
        <label> ~ </label>
        <input autocomplete="off" class="datepicker" name="to_date" id="toDate" value={{to_date|default_if_none:''}}>
    </div>
    <button class="btn btn-primary btn-xs mb-1" type="submit">Submit</button>
</form>


<script>
    $('input[type=radio][name=optionRadios]').on('click',function () {
    var chkValue = $('input[type=radio][name=optionRadios]:checked').val();
    var recruitingSelect = document.getElementById("is_recruiting");

    if(chkValue == 'total'){
        $( '#fromDate' ).attr('disabled', 'disabled').val('');
        $( '#toDate' ).attr('disabled', 'disabled').val('');

    }
    elif(chkValue == 'total'){
        $( '#fromDate' ).removeAttr('disabled');
        $( '#toDate' ).removeAttr('disabled');
    }

    if(chkValue == 'period'){
        recruitingSelect.disabled = true;
    }
    else {
        recruitingSelect.disabled = false;
    }
});
</script>

Если в url нет параметров is_recruiting или optionRadios, from_date, to_date, то приведенный выше код JavaScript работает нормально, но если выбрать опцию и отправить один раз и включить параметры в url, то JavaScript не применяется. Что не так?

http://127.0.0.1:8000/chart/ -> JavaScript применен http://127.0.0.1:8000/chart/?is_recruiting=A&optionRadios=total -> JavaScript не применяется

Ваш Javascript, скорее всего, ломается, потому что elif не существует в JavaScript. Вместо него используйте else if(...). Также, похоже, у вас есть опечатка в логике else if: вы проверяете наличие chkValue == 'total' во второй раз (после первого if). Я предполагаю, что правильным условием будет chkValue != 'total'.

Кроме того, начиная с ES6, рекомендуется использовать проверку безопасности типа с помощью операторов === и !==. Эти операторы будут проверять тип данных параметров при сравнении обеих сторон операции.

Вернуться на верх