how to identify disable tag with jQuery

Asked

Viewed 51 times

2

I have a input with class form_campos, need to make the jQuery identify when the input has the tag disabled and change the class to form_disabled

.form_campos {
    height: 31px;
    width: 100%;
    color: #484848;
    align-self: flex-end;
    padding: 5px;
    outline: none;
    border: 0 solid #484848;
    border-bottom-width: 1px;
    background: transparent;
    border-radius: 0;
}
.form_campos:hover, .form_campos:focus {
    border-color: #0091FF;
}
.form_disabled, .form_disabled:hover, .form_disabled:focus {
    border-color: #D7D7D7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="form_campos" name="nome" disabled>

javascript jquery

  • At what point do you want to do this check? By loading the page, clicking a button, typing the text, etc?

2 answers

3


You can use the selector :disabled for that. This way you will get all the inputs disabled, see the example below:

$('input:disabled').removeClass('form_campos').addClass('form_disabled');
.form_campos {
  height: 31px;
  width: 100%;
  color: #484848;
  align-self: flex-end;
  padding: 5px;
  outline: none;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  background: transparent;
  border-radius: 0;
}

.form_campos:hover,
.form_campos:focus {
  border-color: #0091FF;
}

.form_disabled,
.form_disabled:hover,
.form_disabled:focus {
  border-color: #D7D7D7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="form_campos" name="nome" disabled><br/>

<input class="form_campos" name="nome">

  • Good answer, one idea would be to put the selector to pick the inputs with the form_fields class, instead of all inputs, because it may have other inputs that do not apply to this.

  • Hello @Juniornunes all right? I would put, but then I saw your answer. Do not want to continue with it covering this part?

  • @Juniornunes seems to have worked, so only input with disabled has been changed.

  • I deleted because at the end of everything was very similar to yours, even with this rss change, I will think of some other way and then replaced.

  • @Randrade thanks for the help, it worked

  • @Juniornunes No problems being similar, depending on the context your even fits better even.

  • @Hugoborges What he said is that if you own any input on his page that should not follow this logic, he would not be excluded. Thus, adding another selector, like the class, would help ensure that only the inputs selected would have that change.

  • @Randrade ok, got it.

Show 3 more comments

1

You can use the toggleClass also:

$('.form_campos:disabled').toggleClass('form_campos');
.form_campos {
    height: 31px;
    width: 100%;
    color: #484848;
    align-self: flex-end;
    padding: 5px;
    outline: none;
    border: 0 solid #484848;
    border-bottom-width: 1px;
    background: transparent;
    border-radius: 0;
}
.form_campos:hover, .form_campos:focus {
    border-color: #0091FF;
}
input:disabled {
    border-color: #D7D7D7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="form_campos" name="nome" disabled>

That way when the input have the form_fields class it will remove, and when you don’t have it will add. So you eliminate the use of the other class.

Browser other questions tagged javascript jquery

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