Enabling and disabling input

Asked

Viewed 37 times

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

  • Which browser are you using?

2 answers

2


You are selecting, through jQuery, a non-existent element:

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

The selector above is selecting this:

<nome>...</nome>

Which is probably not what you want.

If the field selector you want to make disabled for #nome, you can do so:

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

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

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

Preventing a standard event

To prevent a default event, simply use the method .preventDefault() 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:

  • I changed but when I press the buttons they are updating the page as if they were a Submit

  • In this case, you should prevent the event. You probably search for event.preventDefault(). I edited the answer. See above.

  • Vlw friend saved me

  • You know if I have to change some property to disable and enable a radio button ?

  • disabled is valid for any type of input.

  • i assign like this

  • <input required name="Cd_sex" value="Male" type="radio" id="rd_male" <?php echo $Result_sexom ? > disabled="disabled"/> <label for="rd_masculine">Masculine</label> <input required name="Cd_sex" type="radio" value="Feminine" id="rd_feminine" <?? > disabled="disabled"/>

  • but when I try to disable in javascript I get a message saying that Cd_sex does not exist

  • $("#Cd_sex"). prop("disabled", false);

  • Dude, I think you better open a new question for this. (I also recommend deleting these comments outside the scope of the question on this page).

Show 5 more comments

1

Simply your dial is wrong:

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

Should be:

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

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

<nome></nome>

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

  • I changed but when I press the buttons they are updating the page as if they were a Submit

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.