how to identify disable tag with jQuery

Question

how to identify disable tag with jQuery

Navigation

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

2

I have input with class form_campos , I need to make jQuery identify when input has tag disabled and change 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><inputclass="form_campos" name="nome" disabled>

javascript jquery

asked by anonymous 09.05.2017 / 14:28

2 answers

1

You can use 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><inputclass="form_campos" name="nome" disabled>

This way when input has the form_field class it will remove, and when it does not have it will add. This eliminates the use of the other class.

09.05.2017 / 14:32

Garbage collector is automatic? MP3 player with Python

score 3 · Accepted Answer

You can use the : disabled selector for this. This way you will get all 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><inputclass="form_campos" name="nome" disabled><br/>

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