Jquery/JS - css is working but attr is not

Question

Im trying to disable an input after a condition and i dont understand why this not working. I tried to use $("#exemplaire_50001_0").attr('disabled', true); and $("#exemplaire_50001_0").prop('disabled', true); but both are changing nothing. Im using Jquery 1.5.1 so i think .attr must be used.

When i add $("#exemplaire_50001_0").css("background-color", "red"); to my selector so the background is changing to red.

My question is, why the .css working but the .prop or .attr is not ? Where is the problem come from ? Is there an other solution to disable an input with jquery ?

Code :

 var test = $('#num_cppap').val();
 var test2 = test.substr(0,3);
 console.log(test2);
 if(test2 == "AIP"){
     $("#exemplaire_50001_0").css("background-color", "red");
     $("#exemplaire_50001_0").attr('disabled', true);
 }

html ( this how i build the html ( using ZendFramework ) ) :

Nav render :

Use `.prop` for setting disabled - `.prop("disabled", true)` — tymeJV, Jun 03 '19 at 13:38
yes, for me disabled mean "prevent the user to tape something" — Nico Boulein, Jun 03 '19 at 13:40
Possible duplicate of [Disable/enable an input with jQuery?](https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) — robinvrd, Jun 03 '19 at 13:40
Post a [mcve] please. Also, do you see any errors in your console? — j08691, Jun 03 '19 at 13:42
No i dont see any error in my console, i just see the string AIP from the console log in the js — Nico Boulein, Jun 03 '19 at 13:45

score 0 · Answer 1 · answered Jun 03 '19 at 13:51

0

As mentioned here :

jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

Set the disabled attribute.
$("input").attr('disabled','disabled'); 
To enable again, the proper method is to use .removeAttr()
$("input").removeAttr('disabled');

var text = $("#text");
var btn = $("#btn");

btn[0].onclick = function() {
 text.attr('disabled', 'disabled');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<input id="text" value="toto" />

<button id="btn">
  click me
</button>

answered Jun 03 '19 at 13:51

robinvrd

1,760
12
28

I must use a click function to disable an element? Because in my code i only use a condition. – Nico Boulein Jun 03 '19 at 13:53
No absolutely not, you can put `text.attr('disabled', 'disabled');` wherever you want or need. – robinvrd Jun 03 '19 at 13:54

score 0 · Answer 2 · answered Jun 03 '19 at 14:05

Can you look at this please, i maked an exemple :

    var id = $("#exemplaire_50001_0");
    var test = $('#num_cppap').val();
    //var test2 = test.substr(0, 3);
    //console.log(test2);
    //if(test2 == "AIP"){
    $("#exemplaire_50001_0").css("background-color", "red");
    id.attr('disabled', 'disabled');
    //}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="tableNiveau" class="declare">
  <table id="tableNivPrep" class="tabData" border="0" style="display:block">
    <thead>
      <tr class="entete">
        <th colspan="2" rowspan="2" class="entete">Préparation</th>
        <th colspan="2" class="entete">Déclaré</th>
        <th colspan="2" rowspan="2" class="entete">Option</th>
        <th colspan="2" rowspan="2" class="entete" style="width:20%">Offre grand compte</th>
      </tr>
      <tr class="entete">
        <th class="entete">Exemplaires</th>
        <th class="entete">Paquets</th>
      </tr>
    </thead>
    <tbody>
      <tr id="50001" class="odd">
        <td>Edition LDQL</td>
        <td></td>
        <td><input type="hidden" value="" name="idPrepa_50001_0"><input type="text" value="" name="exemplaire_50001_0" id="exemplaire_50001_0" class="saisie nivPrep Edition" style="text-align: right; background-color: red;" onkeyup="calculTotauxDeclare()"
            onkeypress="return chiffres(event);"></td>
        <td></td>
        <td></td>
        <td><select name="option_preparation_50001_0" id="option_preparation_50001_0"><option value="">Choix de l'option</option><option value="81000800">LOCAL                                             </option><option value="81000801">Standard                                          </option><option value="81000802">DIRECT                                            </option><option value="81000803">DepotCTC                                          </option><option value="81000804">DepotCDIS                                         </option></select></td>
        <td
          style="text-align:center;"><input type="checkbox" name="zone_dense_50001" id="zone_dense_50001">
          </td>
      </tr>

Atabai Fekri · Answer 3 · 2019-06-03T13:51:41.200

-2

you have to correct your code like below:

from

$("#exemplaire_50001_0").attr('disabled', true);

to

$("#exemplaire_50001_0").attr('disabled', 'disabled');

above code is for disable and if you want to enable it you have to remove disable attribute like below code :

$("input").removeAttr('disabled');

edited Jun 03 '19 at 13:51

answered Jun 03 '19 at 13:40

Atabai Fekri

301
2
4
20

@robinvrd no it isn't. Any non-empty value for the attribute will disable the ``. – Pointy Jun 03 '19 at 13:43
@robinvrd nobody's "trash talking" here. It's simply true that any non-empty string works for the "disabled" attribute value and it always has. – Pointy Jun 03 '19 at 14:00

Jquery/JS - css is working but attr is not

3 Answers3