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?
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.
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
Respuestas:
261
Intente usar el :inputselector, junto con un selector principal:
¿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)
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.
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);}}
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í.
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 latervar list =[];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function(){
list.push('#'+this.id);});
$(list.join(',')).attr('readonly',true);
readOnly
, no los deshabilite.Respuestas:
Intente usar el
:input
selector, junto con un selector principal:fuente
div
y eso es todo. Si me dieran más información, podría haber encontrado una solución más eficiente.fuente
$('#mydiv').find('input, textarea, button')
.Para jquery 1.6+, use en
.prop()
lugar de.attr()
,o
fuente
fuente
Simplemente esta línea de código deshabilitará todos los elementos de entrada
fuente
¿Qué tal lograr esto usando solo el atributo HTML 'deshabilitado'?
Simplemente poniendo deshabilitado en el conjunto de campos todos los campos dentro de ese conjunto de campos se deshabilitan.
fuente
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í.
fuente
Siguiente deshabilitará toda la entrada pero no podrá btn clase y también agregó clase para sobrescribir deshabilitar css.
clase css
fuente
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
fuente
Use la clase CSS para evitar editar los elementos div
CSS:
JS:
O agregue el nombre de la clase en la etiqueta HTML. Evitará editar los Elementos Div.
fuente
Solo tipo de texto
Solo tipo de contraseña
Solo tipo de correo electrónico
fuente