Как отключить поле ввода в зависимости от значения другого поля выбора в bootstrap/crispy?

Я пытаюсь деактивировать поля existing_name на основе значений, выбранных в поле действия. Я использую crispy и опцию рендеринга для поля action из models.py

action = models.CharField(max_length=30,
                              choices=[('add', 'Add'), ('delete', 'Delete'), ('modify', 'Modify'),
                                       ('rename', 'Rename')])

Я проверил все те же вопросы на Stackoverfllow и все предложили деактивировать его скриптом с изменением полей действия

{% extends "KPI_App/base.html" %}
{% load crispy_forms_tags %}

{% block content %}
<form action="" method="post" autocomplete="off" >
    {% csrf_token %}
        <div class="row">
            <div class="col-md-4 id='1'">{{form.action|as_crispy_field}}</div>
        </div>
        <div class="row">
            <div class="row id='existing_name' " >{{form.existing_name|as_crispy_field}}</div>


    <div class="row">
        <div class="col-md-8">
            <button type="submit" class="btn btn-success btn-block btn-lg"><i class="fas fa-database"></i> Submit</button>
        </div>
        <div class="col-md-4">
            <a href="{% url 'KPI_list' %}" class="btn btn-secondary btn-block btn-lg">
                <i class="fas fa-stream"></i> Back to List
            </a>
        </div>
    </div>
</form>
{% endblock content %}
<script>
    $(document).ready(function(){
  $("select[name='action']").on('change',function(){
    if($(this).val()=='1'){
      $("input[name='existing_name']").prop("disabled",false);
    }else{
      $("input[name='existing_name']").prop("disabled",true);
    }
  });
});
</script>

Я не могу присвоить id для этого класса и использовать его в скрипте

Предполагается, что идентификаторы ввода вашей формы - это идентификаторы по умолчанию django: id_action и id_existing_name.

function toggleAction() {
    if ($('#id_action :selected').text() == "Modify") {
        $('#id_existing_name').prop('disabled',false)
    }
    else {
        $('#id_existing_name').prop('disabled',true)
    }
}

$(document).on('click change', '#id_action', function() {
    toggleAction()
})

$(document).ready(function() {
    toggleAction();
});
Вернуться на верх