如何在Bootstrap/Crispy中根据select字段值禁用对应input字段

核心问题点 #

• JS逻辑中的判断值和实际选项值不匹配：你在models中定义的action选项值为add/delete/modify/rename，但原脚本中判断的是$(this).val()=='1'，永远匹配不到，导致逻辑失效。
• 模板中的HTML属性语法错误：你把id属性写到了class的引号范围内，属于语法错误，即使要加id也应该分开写属性。
• 缺少初始化逻辑：页面刚加载完成时没有设置输入框的初始状态，只有触发action的change事件才会更新状态，不符合预期。

修正后的代码 #

1. 模板代码 #

{% 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">{{form.action|as_crispy_field}}</div>
        </div>
        <div class="row">
            <div class="row">{{form.existing_name|as_crispy_field}}</div>
        </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>
<script>
$(document).ready(function(){
    // 状态切换复用函数
    function toggleExistingName() {
        const selectedAction = $("select[name='action']").val();
        // 可根据业务需求修改判断条件，示例为选择add时禁用输入框，其他选项启用
        if(selectedAction === 'add'){
            $("input[name='existing_name']").prop("disabled", true);
        }else{
            $("input[name='existing_name']").prop("disabled", false);
        }
    }
    // 页面加载完成初始化状态
    toggleExistingName();
    // 监听action字段变化切换状态
    $("select[name='action']").on('change', toggleExistingName);

    // 可选逻辑：如果禁用后提交需要拿到字段值，添加提交前临时解禁逻辑
    $("form").on('submit', function(){
        $("input[name='existing_name']").prop("disabled", false);
    })
});
</script>
{% endblock content %}

说明 #

你不需要额外给字段分配id，crispy渲染的表单字段默认name属性就是你定义的模型字段名，用[name=字段名]选择器可以正常定位元素，不需要依赖id。你可以根据自己的业务需求修改toggleExistingName里的判断条件，比如需要选delete的时候禁用就把判断值改成'delete'即可。

内容的提问来源于stack exchange，提问作者Mohsen