deshabilitar todos los elementos de formulario dentro de div

161

¿hay alguna manera de deshabilitar todos los campos (área de texto / campo de texto / opción / entrada / casilla de verificación / enviar, etc.) en un formulario diciendo solo el nombre div principal en jquery / javascript?

— amirash
fuente

44

Tenga en cuenta que al hacer esto, hace que los valores de esos elementos "desaparezcan" al enviar el formulario, para preservar el valor readOnly, no los deshabilite.

— Shadow Wizard is Ear For You

posible duplicado de Cómo deshabilitar todo el contenido div

— Michel Ayres

1

Una idea podría ser ocultar / mostrar un div delante de los controles que permite / evita que se haga clic, además de controles de estilo deshabilitado con CSS.

— Jaider

261

Intente usar el :inputselector, junto con un selector principal:

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

— Andrew Whitaker
fuente

¿Puedo usar esto para configurar todas las entradas dentro de div al valor 0?

— jackson5

2

También quiero deshabilitar <a> ... Mi <a> también tiene onclick

— RAJ

77

Citando jQuery : Debido a que: input es una extensión jQuery y no forma parte de la especificación CSS, las consultas que utilizan: input no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll () nativo. Para lograr el mejor rendimiento al usar: input para seleccionar elementos, primero seleccione los elementos usando un selector CSS puro, luego use .filter (": input").

— acme

2

@acme: De acuerdo al 100%, pero la pregunta no da ninguna pista sobre qué selector podría filtrar. La única información que me dieron fue que el usuario debe poder hacerlo con un nombre principaldiv y eso es todo. Si me dieran más información, podría haber encontrado una solución más eficiente.

— Andrew Whitaker

1

Use .prop () en lugar de .attr () (arriba de jquery 1.6)

— Akshay Gundewar

154

$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

— Trevor
fuente

44

debe ser ('input, textarea, button') todos los selectores deben estar entre comillas con un conjunto de comillas. api.jquery.com/multiple-selector Haciéndolo a su manera está enviando múltiples argumentos.

— Ivan Ivanić

2

Esto solo encontrará entradas, ignorando áreas de texto y botones. El selector de entrada es el camino a seguir, pero si desea enumerarlos explícitamente, deberá usarlo $('#mydiv').find('input, textarea, button').

— Mark Hildreth

1

... o simplemente $ ('# your-form'). children (). prop ('disabled', verdadero);

— walv

@walv su código solo funciona si todos los elementos del formulario son un solo descendiente del formulario. Find () busca todos los elementos en la lista, independientemente del nivel descendiente. Esta línea de código es correcta, aparte de usar el prop en lugar de attr para nuevas versiones de jquery.

— Chris O

32

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

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

o

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

— Optimus Prime
fuente

2

tiene razón, pero en algún momento el trabajo de utilería y el tiempo no funcionan, especialmente debido a la casilla de verificación y el botón de radio

— damon

Me doy cuenta de que este es un hilo viejo, pero esto genera algunos errores al usar el mecanografiado

— Simon Price

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);
        }
    }

— Syed Nasir Abbas
fuente

4

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

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

— Samir Rahimy
fuente

La mejor respuesta de mi opinión.

— Ajay2707

2

¿Qué tal lograr esto usando solo el atributo HTML 'deshabilitado'?

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

Simplemente poniendo deshabilitado en el conjunto de campos todos los campos dentro de ese conjunto de campos se deshabilitan.

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

— طلحة
fuente

1

Estoy usando la función a continuación en varios puntos. Funciona en un elemento div o de botón en una tabla siempre que se use el selector derecho. Simplemente ": botón" no se volvería a habilitar para mí.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

— AWizardInDallas
fuente

Dos en una solución genial.

— 3 reglas

0

Siguiente deshabilitará toda la entrada pero no podrá btn clase y también agregó clase para sobrescribir deshabilitar css.

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

clase css

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

— Rohit Dubey
fuente

0

Para mí, la respuesta aceptada no funcionó ya que tenía algunos campos ocultos asp net que también se desactivaron, así que elegí solo desactivar los 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);

— irfandar
fuente

0

Use la clase CSS para evitar editar 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 agregue el nombre de la clase en la etiqueta HTML. Evitará editar los Elementos Div.

— Laddu Vasanth
fuente

0

Solo tipo de texto

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

Solo tipo de contraseña

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

Solo tipo de correo electrónico

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

— Manish
fuente