Pergunta sobre jquery, html, forms – Como desabilitar / habilitar o campo de seleção usando jQuery?

155

Eu gostaria de criar uma opção em um formulário como

<code>[] I would like to order a [selectbox with pizza] pizza
</code>

onde selectbox é habilitado somente quando a caixa de seleção está marcada e desabilitada quando não está marcada.

Eu chego com este código:

<code><form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>
</code>

Eu tentei vários métodos como definir atributo desativado usando.prop(), .attr()e.disabled=. No entanto, nada acontece. Ao aplicar a um<input type="checkbox"> ao invés de<select>, o código funciona perfeitamente.

Como desativar / ativar<select> usando jQuery?

Olá, esta abordagem funciona no IE 10? Não sei como habilitar um campo de seleção no IE 10. ROROROOROROR

Sua resposta

8   a resposta
7

Use o seguinte:

<code>$("select").attr("disabled", "disabled");
</code>

Ou simplesmente adicioneid="pizza_kind" para<select> tag, como<select name="pizza_kind" id="pizza_kind">: ligação jsfiddle

A razão pela qual seu código não funcionou é simplesmente porque$("#pizza_kind") não está selecionando o<select> elemento porque não temid="pizza_kind".

Edit: na verdade, um melhor seletor é$("select[name='pizza_kind']"): ligação jsfiddle

17

Disabled é umboleanoAtributo doselecione o elemento Como indicado pelaWHATWG, isso significa que oDIREITA PARA DESATIVAR com jQuery seria

<code>jQuery("#selectId").attr('disabled',true);
</code>

Isso tornaria esse HTML

<code><select id="selectId" name="gender" disabled="disabled">
    <option value="-1">--Select a Gender--</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
</select>
</code>

Isso funciona para ambosXHTML e HTML (referência do W3School)

No entanto, também pode ser feito usando-o como propriedade

<code>jQuery("#selectId").prop('disabled', 'disabled');
</code>

obtendo

<code><select id="selectId" name="gender" disabled>
</code>

Que só funciona para HTML e não para XTML

NOTA: Um elemento desativado não será enviado com o formulário como respondido nesta pergunta:O elemento de formulário desativado não é enviado

NOTA 2: Um elemento desativado pode estar em cinza.

NOTA 3:

Um controle de formulário que está desativado deve impedir que qualquer evento de clique que esteja enfileirado na origem da tarefa de interação do usuário seja despachado no elemento.

TL; DR
<code><script>
    var update_pizza = function () {
        if ($("#pizza").is(":checked")) {
            $('#pizza_kind').attr('disabled', false);
        } else {
            $('#pizza_kind').attr('disabled', true);
        }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
</script>
</code>
105

Para poder desabilitar / habilitar, selecione primeiro que todas as suas seleções precisam de um ID ou classe. Então você poderia fazer algo assim:

Desativar:

<code>$('#id').attr('disabled', 'disabled');
</code>

Habilitar:

<code>$('#id').removeAttr('disabled');
</code>
"O método .prop () deve ser usado para definir desativado e verificado em vez do método .attr ()"api.jquery.com/prop Colin
@Colin, ambos funcionam, então não vejo problema. Black
esta deve ser a resposta selecionada .. muito melhor para skimming :) quemeful
5

desculpe por responder no thread antigo, mas meu código pode ajudar outro no futuro. Eu estava no mesmo cenário que quando a caixa de seleção será marcada, então poucos campos de entradas selecionadas serão habilitados de outra forma desabilitados.

<code>$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});
</code>
2

Boa pergunta - acho que a única maneira de conseguir isso é filtrar os itens no select.
Você pode fazer isso através de um plugin jquery. Verifique o seguinte link, ele descreve como conseguir algo semelhante ao que você precisa. obrigado
jQuery desabilitar opções SELECT com base em Radio selecionado (precisa de suporte para todos os navegadores)

5

Seuselect não tem um ID, apenas um nome. Você precisará modificar seu seletor:

<code>$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});
</code>

Demonstração:http://jsbin.com/imokuj/2/edit

14

Simplesmente use:

<code>var update_pizza = function () {
     $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked'));
};

update_pizza();
$("#pizza").change(update_pizza);
</code>

DEMO

259

Você gostaria de usar código como este:

<code><form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
</script>
</code>

Aqui está trabalhandoexemplo

O que é $ (update_pizza); fazendo? Envolvendo a função em um objeto jquery? Edward
$('#pizza_kind').prop('disabled', false); e$('#pizza_kind').prop('disabled', true);. ComoDocumentação do jQuery diz: As propriedades geralmente afetam o estado dinâmico de um elemento DOM sem alterar o atributo HTML serializado. Os exemplos incluem a propriedade de valor de elementos de entrada, a propriedade desativada de entradas e botões ou a propriedade marcada de uma caixa de seleção. O método .prop () deve ser usado para definir desativado e verificado em vez do método .attr (). O método .val () deve ser usado para obter e definir o valor. naor
para o jQuery 3 deve ser "$ ('# pizza_kind'). prop ('disabled', true / false);" até onde sei Gennady G

Perguntas relacionadas