desativar todos os elementos do formulário dentro de div

161

existe uma maneira de desabilitar todos os campos (área de texto / campo de texto / opção / entrada / caixa de seleção / enviar etc) em um formulário informando apenas o nome do pai div em jquery / javascript?

— amirash
fonte

4

Observe que, ao fazer isso, você faz com que os valores desses elementos "desapareçam" ao enviar o formulário - para preservar o valor, torná-los readOnly, não desabilitados.

— Shadow Wizard é Ear For You

possível duplicata Como desativar todos os conteúdos div

— Michel Ayres

1

Uma idéia pode ser ocultar / mostrar uma div na frente dos controles que permite / impedir que sejam clicados, além de estilizar controles desabilitados com css.

— 22313 Jaider

261

Tente usar o :inputseletor, juntamente com um seletor pai:

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

— Andrew Whitaker
fonte

posso usar isso para definir todas as entradas dentro de div para o valor 0?

— jackson5

2

Eu quero desativar <a> também ... O meu <a> também tem um clique também

— RAJ 30/07

7

Citando jQuery : Como: input é uma extensão jQuery e não faz parte da especificação CSS, as consultas que usam: input não podem tirar proveito do aumento de desempenho fornecido pelo método DOM querySelectorAll () nativo do DOM. Para obter o melhor desempenho ao usar: input para selecionar elementos, primeiro selecione os elementos usando um seletor CSS puro e use .filter (": input").

— acme

2

@ acme: Concordo 100%, mas a pergunta não dá nenhuma dica sobre qual seletor eu poderia filtrar. A única informação que recebi foi que o usuário deve ser capaz de fazê-lo com um nome de paidiv e é isso. Se tivesse mais informações, eu poderia ter encontrado uma solução mais eficiente.

— Andrew Whitaker

1

Use .prop () em vez de .attr () (acima jquery 1.6)

— Akshay Gundewar

154

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

— Trevor
fonte

4

deve ser ('entrada, área de texto, botão') todos os seletores devem ser citados com um conjunto de aspas. api.jquery.com/multiple-selector Fazendo do seu jeito, você está enviando vários argumentos.

— Ivan Ivanić

2

Isso encontrará apenas entradas, ignorando áreas de texto e botões. O seletor: input é o caminho a seguir, mas se você quiser listá-los explicitamente, precisará usá-lo $('#mydiv').find('input, textarea, button').

— Mark Hildreth

1

... ou apenas $ ('# your-form'). children (). prop ('disabled', true);

— walv

@walv seu código só funciona se todos os elementos do formulário forem um único descendente do formulário. Find () localiza todos os elementos da lista, independentemente do nível descendente. Esta linha de código está correta, exceto usando o prop em vez de attr para novas versões do jquery.

— 26616 Chris O

32

Para jquery 1.6+, use em .prop()vez de .attr(),

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

ou

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

— Optimus Prime
fonte

2

você está certo, mas algum tempo de trabalho prop e algum tempo não trabalho, especialmente na causa da caixa de seleção e radiobutton

— Damon

Sei que esta é uma discussão antiga, mas este chuta para cima alguns erros ao usar typescript

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

4

Simplesmente esta linha de código desativará todos os elementos de entrada

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

— Samir Rahimy
fonte

melhor resposta da minha opinião.

— Ajay2707

2

Que tal fazer isso usando apenas o atributo HTML 'desativado'

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

Apenas colocando desativado no conjunto de campos, todos os campos dentro desse conjunto são desativados.

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

— طلحة
fonte

1

Estou usando a função abaixo em vários pontos. Funciona em elementos div ou button em uma tabela, desde que o seletor direito seja usado. Apenas ": button" não seria reativado para mim.

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

— AWizardInDallas
fonte

solução dois em um ótimo.

— 3 regras

0

A seguir, desabilitaremos toda a entrada, mas não a classe btn e também a classe adicionada para substituir o CSS desabilitado.

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

classe css

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

— Rohit Dubey
fonte

0

Para mim, a resposta aceita não funcionou, pois eu tinha alguns campos ocultos da rede asp que foram desativados também, então escolhi apenas desativar os campos visíveis

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

0

Use a classe CSS para impedir a edição dos 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>');

Ou adicione o nome da classe na tag HTML. Isso impedirá a edição dos elementos Div.

— Laddu Vasanth
fonte

0

Apenas tipo de texto

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

Somente tipo de senha

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

Apenas tipo de email

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

— Manish
fonte