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

#javascript #html #django #django-crispy-forms

Вопрос:

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

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

Я проверил все тот же вопрос на Stackoverflow и всем предложил отключить его с помощью скрипта с изменениями полей действий

 {% 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>
 

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

Ответ №1:

Предполагая, что ваши идентификаторы ввода формы являются идентификаторами 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();
});
 

Комментарии:

1. как я должен добавить идентификатор для поля ввода, я имею в виду, как я могу добавить идентификатор для action поля

2. @Мохсен Джанго добавляет это сам! если вы осмотрите элемент, вы его увидите. Щелкните правой кнопкой мыши на входе > Проверить

3. я добавил скрипт в код и existing_name поле отключено со всеми возможными блокировками у меня есть 4 выбора add , delete , modify , rename , с modify опцией нужно включить existing_name поле

4. @Мохсен, я обновил свой ответ, чтобы отразить выпадающий список выбора