1

Buenas tardes, soy algo nuevo en Django, y estoy intentando crear una web con un diseño de Material design, usando django-material, un paquete para los formularios en Django que aplican este estilo, y tengo el siguiente problema:

Lo que quiero hacer es como bien pone en el título de mi pregunta es, habilitar y deshabilitar un ModelChoiceField que depende de otro.

Tengo un ModelChoiceField llamado "Categorías" y otro "Subcategorías". Al cargar la página tiene que estar deshabilitado, y mi intención es que mientras no esté seleccionada una categoría, esté deshabilitado el control de subcategorías, y cuando se haya seleccionado una categoría, se habilite. Para esto he estado usando JQuery.

Esto en Django sin el estilo de este paquete, no tengo problema, pero al añadir este paquete, para aplicar este estilo (que crea en el HTML div, ul, input, select anidado) lo complica de forma que no consigo hacer la deshabilitacion y habilitacion de los controles.

En el codigo hay dos selectores comentados que he intentado por lógica, pero no sirven en el momento de carga de la página.

Aquí una captura del HTML que forma el paquete django-material:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Aquí el código de mi forms.py

class RegistroProductoForm(forms.Form):
    categorias = forms.ModelChoiceField(queryset=Categoria.objects, empty_label='Seleccione una categoría...',)
    subcategorias = forms.ModelChoiceField(queryset=Subcategoria.objects, empty_label='Seleccione una subcategoría...')

Aquí el código de mi template

{% load staticfiles %}
{% include 'material/includes/material_css.html' %}
<script src="{% static 'material/js/jquery-2.2.0.js' %}"></script>
{% include 'material/includes/material_js.html' %}
{% load material_form %}

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
    <form method="POST" action="">{% csrf_token %}
      {% form form=form %}{% endform %}
      <button type="submit" name="_submit" class="waves-effect waves-light btn btn-primary btn-lg">Enviar</button>
    </form>

<script charset="utf-8" type="text/javascript">
$(document).ready(function () {

 // Con este selector se bloquea al cargar la página, pero luego se queda bloqueado el control aunque se vea habilitado de nuevo
$('#id_subcategorias').attr('disabled', true);

//Con este selector, que es el mismo que está dentro del if, directamente no deshabilita al cargar la página
$("#id_subcategorias_container").find('input').attr('disabled',true);

    $('#id_categorias').on('change', function () {
        var id_categoria = $('#id_categorias').val();
        var id_subcategoria = $('#id_subcategorias').val();

        if(id_categoria == ''){
            $("#id_subcategorias_container").find('input').attr('disabled',true);
        }else{
             $("#id_subcategorias_container").find('input').removeAttr('disabled');
        }
});

No sé que más hacer ya, espero haberme explicado bien y que podáis ver la solución que no veo para este problema.

Gracias.

1 respuesta 1

1

Ya se cuál es el fallo. Se trata de que mi código se ejecuta antes que Materialize, por lo tanto, al cargar la página, no accedía a dicho código que se genera después.

"La solución" es que he puesto un temporizador para que le de tiempo a cargarse.

 setTimeout(function(){
        $("#id_subcategorias_container").find('input').attr('disabled',true);
    }, 1000);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.