如何根据 bootstrap/crispy 中的另一个选择字段值禁用输入字段？

Question

我正在尝试根据在操作字段上选择的值停用 existing_name 字段 我正在使用 crispy 和 models.py 中 action 字段的渲染选项

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 并使用它的脚本

Answer 1

假设您的表单输入 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();
});