Enabling and Disabling Input

Question

Enabling and Disabling Input

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I created a script to enable and disable fields on my page but they are not running.

$(document).ready(function() {
  $("#EditarDados").click(function() {
    // habilita o campo 
    $("nome").prop("disabled", false);

  });

  $("#SalvarDados").click(function() {
    // desabilita o campo 
    $("nome").prop("disabled", true);

  });
});

<button class="btn blue center-align" name="Salvar" id="SalvarDados">Salvar</button>
<button class="btn blue center-align" name="EditarDados" id="EditarDados">Editar Dados</button>
<input id="nome" name="nome" value="<?php echo $result['nm_nome'] ?>" type="text" disabled>

html jquery

asked by anonymous 15.06.2018 / 00:43

2 answers

1

Your selector is simply wrong:

$("nome").prop("disabled", false);

Should be:

$("input[name=nome]").prop("disabled", false);

The selectors in jQuery and document.querySeletor are similar to those used in CSS, so when you used only $('nome') jQuery looked for tags like this:

<nome></nome>

The input selector will search for the inputs and the [name=nome] part search by attribute and value of this attribute.

15.06.2018 / 00:55

When we generate a docker container, are we lifting a linux virtual machine in the background? Delay before showing a div

score 2 · Accepted Answer

You are selecting, via jQuery, a nonexistent element:

$("nome"); // Não existe no DOM

The above selector is selecting this:

<nome>...</nome>

That's probably not what you want.

If the selector of the field you want to make disabled is #nome , you can do this:

$(document).ready(function() {
  $("#EditarDados").click(function () {
    $("#nome").prop("disabled", false);
  });

  $("#SalvarDados").click(function () {
     $("#nome").prop("disabled", true);
  });
});

If you want to select by the name attribute, change the $("#nome") by $('[name="nome"]') .

Preventing a Default Event

To prevent a default event, just use the .preventDefault() method of the event:

$(document).ready(function() {
  $("#EditarDados").click(function (event) {
    event.preventDefault();
    $("#nome").prop("disabled", false);
  });

  $("#SalvarDados").click(function (event) {
     event.preventDefault();
     $("#nome").prop("disabled", true);
  });
});

To learn more, please read:

link