deshabilitar todos los elementos de formulario dentro de div

hay una manera de desactivar todos los campos (textarea/textfield/opción/entrada/casilla/presentar etc) en un formulario diciendo que solamente el padre div nombre en jquery/javascript?

  • Tenga en cuenta que por esta causa los valores de los elementos para «desaparecer» al enviar el formulario, para preservar el valor de hacerlos readOnly, no discapacitados.
  • posibles duplicados de Cómo deshabilitar todos los div de contenido
  • Una Idea podría ser mostrar/ocultar un div en el frente de los controles permite/impide hacer clic, además de estilo de la movilidad de los controles con css.
InformationsquelleAutor amirash | 2011-03-13

11 Kommentare

  1. 256

    Trate de usar el :entrada selector, junto con sus padres: selector

    $("#parent-selector :input").attr("disabled", true);
    • puedo usar esto para establecer todas las entradas dentro de div a valor 0?
    • Quiero deshabilitar <a> también… Mi <a> ha onclick demasiado
    • Citando jQuery: Porque :la entrada es una extensión de jQuery y no forma parte de la especificación de CSS, las consultas de uso :de entrada no se puede tomar ventaja de la mejora de rendimiento proporcionados por los nativos de la DOM querySelectorAll() método. Para lograr el mejor rendimiento cuando se usa :entrada para seleccionar elementos, primero seleccione los elementos a través de una simple selector CSS, luego de su uso .filtro(«:de entrada»).
    • De acuerdo 100%, pero la pregunta no dar pistas en cuanto a lo del selector de que yo podría filtrar. La única información que me dieron fue que el usuario debe ser capaz de hacerlo con un padre div nombre y eso es todo. Si se le da más información que yo podría haber llegado con una solución más eficiente.
    • Tienes razón, sólo quería mencionar esto en aras de la exhaustividad. Aunque supongo que el aumento de rendimiento que sólo viene a jugar con un montón de campos de formulario.
    • si desea deshabilitar todos los elementos, no sólo los insumos, pero algunos botones personalizados, utilizar a los niños(): $(‘#su-forma»).los niños().prop(‘disabled’, true);
    • Uso .prop() en lugar de .attr() (por encima de jquery 1.6)
    • traté de $(«#my_frm»).filtro(«:de entrada»).prop(‘disabled’, true); pero no funciona (sin embargo código en esta respuesta obras)…alguna idea de por qué?
    • de entrada no es capaz de manejar a elegir (desplegable), necesita un selector para seleccionar: $(«#padres :selector de entrada, #padre-selector selecciona»).attr(«disabled», true);
    • que versión de jQuery se utilizan?
    • jquery-1.12.4.min.js y si no recuerdo mal, fue con respecto a la selección de menús desplegables

  2. 151
    $('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
    • debe ser (‘input, textarea, button’) todos los selectores debe ser citado con una serie de citas. api.jquery.com/multiple-selector Haciendo su camino se envían varios argumentos.
    • Esto sólo va a encontrar usted insumos, ignorando estas zonas de texto y botones. El :selector de entrada es el camino a seguir, pero si usted quiere hacer una lista de ellos explícitamente, usted tendrá que usar la $('#mydiv').find('input, textarea, button').
    • …o tan solo $(‘#su-forma»).los niños().prop(‘disabled’, true);
    • el código sólo funciona si todos los elementos del formulario son de un solo descendiente de la forma. Buscar() encuentra todos los elementos en la lista independientemente de la descendiente de nivel. Esta línea de código es correcto otras que el uso de la proposición en lugar de attr para las nuevas versiones de jquery.
  3. 32

    Para jquery 1.6+, uso .prop() en lugar de .attr(),

    $("#parent-selector :input").prop("disabled", true);

    o

    $("#parent-selector :input").attr("disabled", "disabled");
    • tienes razón, pero algún tiempo prop trabajo y tiempo de no trabajo,especialmente en la causa de checkbox y radiobutton
    • me doy cuenta de que este es un hilo viejo, pero esto aumenta algunos errores cuando se utiliza la máquina
  4. 5
        $(document).ready(function () {
            $('#chkDisableEnableElements').change(function () {
                if ($('#chkDisableEnableElements').is(':checked')) {
                    enableElements($('#divDifferentElements').children());
                }
                else {
                    disableElements($('#divDifferentElements').children());
                }
            });
        });
    
        function disableElements(el) {
            for (var i = 0; i < el.length; i++) {
                el[i].disabled = true;
    
                disableElements(el[i].children);
            }
        }
    
        function enableElements(el) {
            for (var i = 0; i < el.length; i++) {
                el[i].disabled = false;
    
                enableElements(el[i].children);
            }
        }
  5. 3

    Simplemente esta línea de código se deshabilitar todos los elementos de entrada

    $('#yourdiv *').prop('disabled', true);
  6. 1

    Estoy usando la siguiente función en varios puntos. Trabaja en un div o botón de elementos en una tabla mientras la derecha del selector se utiliza. Justo «:el botón de» no volver a habilitar para mí.

    function ToggleMenuButtons(bActivate) {
        if (bActivate == true) {
            $("#SelectorId :input[type='button']").prop("disabled", true);
        } else {
            $("#SelectorId :input[type='button']").removeProp("disabled");
        }
    }
    • dos en una solución genial.
  7. 1

    Cómo lograr esto usando sólo atributo HTML «discapacitados»

    <form>
     <fieldset disabled>
      <div class="row">
       <input type="text" placeholder="">
       <textarea></textarea>
       <select></select>
      </div>
      <div class="pull-right">
        <button class="button-primary btn-sm" type="submit">Submit</button>
      </div>
     </fieldset>
    </form>

    Solo con poner movilidad en el fieldset todos los campos dentro de ese grupo de controles se desactivarán.

    $('fieldset').attr('disabled', 'disabled');
  8. 0

    Siguiente desactivará todas las entradas, pero no será capaz de a btn clase y también se agrega la clase para sobrescribir desactivar css.

    $('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

    clase css

    .disabledClass{
      background-color: rgb(235, 235, 228) !important;
    }
  9. 0

    Para mí el aceptado la respuesta no funcionó y tuve algunos asp net campos ocultos que se deshabilita también así que elegí sólo para deshabilitar campos visibles

    //just to save the list so we can enable fields later
    var list = [];
    $('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
        list.push('#' + this.id);
    });
    
    $(list.join(',')).attr('readonly', true);
  10. 0

    Utilizar la Clase CSS para evitar que a partir de la Edición de los Elementos Div

    CSS:

    .divoverlay
    {
    position:absolute;
    width:100%;
    height:100%;
    background-color:transparent;
    z-index:1;
    top:0;
    }

    JS:

    $('#divName').append('<div class=divoverlay></div>');

    O agregar el nombre de la clase en la Etiqueta HTML.
    Se evitará de la edición de los Elementos Div.

  11. 0

    Sólo tipo de texto

    $(".form-edit-account :input[type=text]").attr("disabled", "disabled");

    Sólo tipo de Contraseña

    $(".form-edit-account :input[type=password]").attr("disabled", "disabled");

    Sólo Tipo De Correo Electrónico

    $(".form-edit-account :input[type=email]").attr("disabled", "disabled");

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea