"Disabling Form Fields Based on Selected Option in Django ModelForm Doesn't Work"

Question

I'm facing an issue while trying to dynamically enable/disable form fields based on the selected option in a Django ModelForm. I have a Listing model with a listing_type field that has several predefined choices like "Car," "Food and Life," "Travelling," and "Apartments."

class Listing(models.Model):
    TYPE_CHOICES = [
        ('Car', 'Car'),
        ('Food and Life', 'Food and Life'),
        ('Travelling', 'Travelling'),
        ('Appartements', 'Appartements'),
    ]
    
    area = models.CharField(max_length=80)
    location = models.CharField(max_length=80)
    price = models.IntegerField()
    image = models.ImageField(upload_to='shop/images', default="")
    title = models.CharField(max_length=170, default="")
    listing_type = models.CharField(max_length=20, choices=TYPE_CHOICES)

I've created a Mylisting_form based on the Listing model using a ModelForm in Django. I'm trying to achieve the following behaviour:

When the user selects "Car," "Travelling," or "Apartments" as the listing_type, I want to enable the area and location fields. When the user selects "Food and Life," I want to disable the area and location field.

class Mylisting_form(forms.ModelForm):
    class Meta:
        model = Listing
        fields = ['area', 'location', 'price', 'image', 'title', 'listing_type']
        widgets = {
            'area': forms.TextInput(attrs={'class': 'form-control'}),
            'location': forms.TextInput(attrs={'class': 'form-control'}),
            'price': forms.TextInput(attrs={'class': 'form-control'}),
            'title': forms.TextInput(attrs={'class': 'form-control'}),
            'listing_type': forms.Select(attrs={'class': 'form-control'}),
        }
        
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # Disable area and location fields by default
        self.fields['area'].widget.attrs['disabled'] = True
        self.fields['location'].widget.attrs['disabled'] = True
    
    def clean(self):
        cleaned_data = super().clean()
        listing_type = cleaned_data.get('listing_type')

        if listing_type in ['Apartments', 'Traveling', 'Car']:
            self.fields['area'].widget.attrs['disabled'] = False
            self.fields['location'].widget.attrs['disabled'] = False
        else:
            self.fields['area'].widget.attrs['disabled'] = True
            self.fields['location'].widget.attrs['disabled'] = True

        return cleaned_data

Despite implementing this logic, the area and location fields remain disabled for all listing types. I've verified that there is no JavaScript or CSS interference affecting the fields' attributes.

I'm using latest Django version and have also checked this behavior on multiple browsers to confirm that it's not browser-specific.

Can anyone help me identify why the fields are not enabling/disabling based on the selected listing_type and provide guidance on how to correct this issue? Thank you in advance for your help!

I've been working on a Django project where I have a form that dynamically enables or disables certain fields based on the selected option in a dropdown. Specifically, I have a Mylisting_form that's derived from a Listing model using Django's ModelForm. I've implemented a custom clean method in the form to handle the enabling/disabling logic based on the selected listing_type.

Expected Outcome: When a user selects "Car," "Travelling," or "Apartments" as the listing_type, I expected the area and location fields to become enabled. Conversely, when the user selects "Food and Life," I expected these fields to be disabled.

Actual Outcome: However, despite my implementation of the custom clean method to modify the widget attributes, the area and location fields remain disabled for all listing types. This unexpected behavior persists even after verifying that there are no JavaScript or CSS interferences affecting the field attributes.