Eu tenho uma caixa de diálogo jQuery que requer que o usuário insira certas informações. Neste formulário, eu tenho um botão "continuar". Gostaria que esse botão "continuar" fosse ativado apenas quando todos os campos tivessem conteúdo, caso contrário, ele permanecerá desativado.
Eu escrevi uma função que é chamada toda vez que um status de campo é alterado. No entanto, não sei como habilitar e desabilitar o botão de diálogo desta função. O que devo fazer?
Opa e esqueci de mencionar que esses botões foram criados da seguinte maneira:
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 'auto',
width: 700,
show: 'clip',
hide: 'clip',
modal: true,
buttons: {
'Add to request list': function() {
$(this).dialog('close');
$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
})
});
Respostas:
Você deseja definir a propriedade desativada
Atualização : Ahha, eu vejo a complexidade agora. O jQuery Dialog tinha uma única linha que será útil (na seção "botões").
Você precisará obter a coleção de botões na caixa de diálogo, percorrê-la para encontrar qual você precisa e, em seguida, defina o atributo desativado como mostrei acima.
fonte
.prop('disabled', true)
é o preferido em jQuery 1.6+É muito simples:
fonte
.prop('disabled', true)
é o preferido em jQuery 1.6+Você acabou complicando uma tarefa simples; a caixa de diálogo jQueryUI possui duas maneiras de definir botões por um motivo.
Se você precisar definir apenas o manipulador de cliques para cada botão, use a opção que aceita um
Object
argumento. Para desativar botões e fornecer outros atributos, use a opção que aceita umArray
argumento.O exemplo a seguir desativará um botão e atualizará seu estado corretamente aplicando todas as classes e atributos CSS do jQueryUI.
Etapa 1 - Crie sua caixa de diálogo com um
Array
dos botões:Etapa 2 - Ativar / desativar o botão Concluído após a criação da caixa de diálogo:
fonte
each
loop é desnecessário. Especifique umclass
atributo nabuttons
matriz e você pode usá-lo para encontrar o elemento certo.Se você criar uma caixa de diálogo fornecendo IDs para os botões,
podemos desativar o botão com o seguinte código:
fonte
Queria poder encontrar o botão pelo nome (já que tenho vários botões na caixa de diálogo jQuery UI). Também tenho várias caixas de diálogo na página, então preciso de uma maneira de obter os botões de uma caixa de diálogo específica. Aqui está a minha função:
fonte
Isso desativa um botão:
Você precisará adicionar a identificação da caixa de diálogo se tiver várias caixas de diálogo em uma página.
fonte
Aqui está o exemplo da pergunta modificada para desativar o botão uma vez clicado:
Além disso, a seguinte pergunta também será útil com isso: Como posso desativar um botão em uma caixa de diálogo jQuery UI?
fonte
Encontrei uma maneira fácil de desativar (ou executar qualquer outra ação) em um botão da caixa de diálogo.
Você simplesmente seleciona o pai da sua caixa de diálogo e encontra todos os botões. Depois de verificar o texto do seu botão, você pode identificar seus botões.
fonte
Eu consegui isso trabalhando com o método
.dialog("widget")
que retorna a própria caixa de diálogo DIV. Se você estiver nos métodos de diálogo:fonte
Do ponto de vista da usabilidade, geralmente é melhor deixar o botão ativado, mas mostrar uma mensagem de erro se alguém tentar enviar um formulário incompleto. Isso me deixa louco quando o botão em que quero clicar está desativado e não há nenhuma pista do porquê.
fonte
Tente o seguinte:
fonte
Aqui está minha função enableOk para uma caixa de diálogo jQuery:
O botão "primeiro" é o mais à direita. Você desabilita o botão e define a classe desabilitada da caixa de diálogo, para o efeito visual adequado.
fonte
Na interface do usuário legada do jQuery (versão 1.7.3), eu era capaz de simplesmente usar
apenas desativar o botão no próprio elemento DOM. Agora que atualizamos para a nova jQuery UI (versão 1.8.7), esse método não funciona mais no Firefox, mas posso simplesmente chamar o botão jquery UI específico para desativar e ativar funções nos objetos jquery do botão:
fonte
haha, acabei de encontrar um método interessante para acessar os botões
Parece que todos vocês não sabem que há um objeto de evento nos argumentos ...
a propósito, ele apenas acessa o botão de dentro do retorno de chamada; em casos gerais, é bom adicionar um ID para acesso
fonte
Se você realmente deseja desativar um botão, descobri que você também precisa chamar o método .unbind (). Caso contrário, o botão ainda poderá estar ativo e um clique duplo poderá levar a vários envios de formulário. O código a seguir funciona para mim:
fonte
Encontrei uma solução alternativa que pode ser aplicada a pessoas que tentam fazer algo semelhante. Em vez de desativar o botão, coloquei uma
if
instrução simples na função para verificar se a caixa de seleção foi marcada.Caso contrário, exibia uma mensagem simples informando que a caixa precisava ser marcada antes do envio.
Por exemplo:
Enfim, espero que ajude alguém.
fonte
Eu criei uma função jQuery para facilitar essa tarefa. Basta adicionar isso ao seu arquivo JavaScript:
Desative o botão 'OK' na caixa de diálogo com a classe 'dialog':
Ative todos os botões:
Ative o botão 'Fechar' e altere a cor:
Eu espero que isso ajude.
fonte
Infelizmente, nenhuma solução fornecida aqui funcionou para várias caixas de diálogo na página.
Além disso, o problema era que a caixa de diálogo original não contém o painel de botões em si, mas é um irmão dela.
Então, eu pensei em selecionar por ID da caixa de diálogo assim:
...
...
e a mesma função getFirstDialogButton () poderia ser usada posteriormente para ativar o botão, por exemplo, após a validação bem-sucedida.
Espero que possa ajudar alguém.
fonte
Aqui está um exemplo que eu acabei de implementar usando o método Array de atribuir botões, que depois me permite usar seletores de identificação mais tarde - assim como a resposta aceita declarada originalmente - para ativar / desativar botões e até mostrá-los / ocultá-los completamente como estou fazendo.
Após o envio bem-sucedido, desativo e oculto dois dos botões e o botão OK que foi desabilitado por padrão.
Espero que isto ajude.
fonte
Criei uma função semelhante ao que Nick fez, mas meu método não exigiria a configuração de dialogClass e você poderá obter os botões de uma caixa de diálogo específica por meio do ID (se houver mais de uma no seu aplicativo)
Portanto, se você criou o diálogo da seguinte maneira:
Você pode obter os botões fazendo o seguinte:
Desabilitar:
Para habilitar:
fonte
Apenas para constar, este post me ajudou a resolver meu problema. Em poucas palavras, você deve definir o atributo desativado como desativado, e não falso:
É assim que todo o código fica, também adicionei alguns estilos para torná-lo desativado:
fonte
Eu acho que deveria funcionar com todos,
fonte
Para desativar o botão Salvar na minha caixa de diálogo, use a seguinte linha em sua função.
Para alterar um texto em um botão, use a seguinte linha (altere o texto do botão Cancelar para Fechar-me)
fonte
@ Chris Você pode usar as seguintes linhas de código para ativar / desativar os botões da caixa de diálogo até que sua caixa de seleção marque / desmarque
Fonte original: http://jsfiddle.net/nick_craver/rxZPv/1/
fonte
Chamar é
.attr("disabled", true)
claro que funciona, mas usando o jQuery você gostaria de fazê-lo de maneira mais "açucarada", então escrevi uma extensão simples:Agora você tem funções
enable()
edisable()
, portanto, pode fazer seu trabalho dessa maneira:Qual é o mesmo que
e
fonte
Isso fez o trabalho para mim:
fonte
No mundo do jQuery, se você deseja selecionar um objeto de um conjunto de elementos DOM, use eq () .
Exemplos:
ou
fonte
De acordo com a documentação :
https://api.jqueryui.com/dialog/#option-buttons
Para poder simplesmente selecionar o botão, você pode adicionar uma própria classe CSS ao botão, que deve ser ativada / desativada.
Em seguida, a ativação / desativação ficaria assim:
fonte
Se alguém estiver olhando para substituir um botão por algo como uma animação de carregamento quando clicado (por exemplo, quando um botão "Enviar" envia o formulário na caixa de diálogo) - você pode substituir o botão pela sua imagem da seguinte maneira:
jQuery replaceWith docs
fonte
Para desativar um botão, na caixa de diálogo aberta:
fonte