Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

272
Views
How to disable a input field according to another select field value in bootstrap/crispy?

I'm trying to deactivate existing_name fields based on values that selected on action field I'm using crispy and rendering option for action field from models.py

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

I had check all same question on Stackoverfllow and all suggested to deactivate it by script with changes happen action fields

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

I can't assign id for these class and use it it script

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Assuming your form input ids are the django default: id_action and 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();
});
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!