Issue removeAttr("disabled")

Question

I am programming one form and I would like to have this functionality:

If you click over United States as your country, some inputs get unlocked (before they are disabled). I have created this code in jquery:

$('option#usa').click(function(){
    $('.inputText').attr('disabled', false);
    })
habilita : function(){ 
    $(".inputText").removeAttr("disabled");
 }
deshabilita: function(){ 
    $(".inputText").attr("disabled","disabled"); }

And in the HTML document I have this:

<span class="texto azul">Country</span><select class="caja" name="country">
<option value="">Country...</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="United States of America" onclick="habilita()">USA</option>
</select>
<span id="usa" class="texto azul">HCP Designation</span><select name="hcp" disabled="disabled" class="caja inputText">
            <option value="des">Designation...</option>
            <option value="md">MD</option>
        </select><br /><br />
        <span id="texto" class="texto azul">If other, please specify</span>
        <textarea class="caja inputText" name="texto" disabled="disabled"></textarea><br /><br />
        <span class="texto azul">State of Licensure</span><input class="caja inputText" name="state" type="text" disabled="disabled"/><br /><br />
        <span class="texto azul">License number</span><input class="caja inputText" name="license" type="text" disabled="disabled"/><br /><br />
        </form>

The problem is that I never achieve that the fields appear unlocked.

you probably want `.prop('disabled', false)`. the attribute is just an attribute; the DOM property is what actually controls whether it's disabled. — Eevee, May 22 '14 at 16:29
Is this your actual code. If so the last two examples are object syntaxes, except they are not in an object. I don't think it works like that. — War10ck, May 22 '14 at 16:33
@eevee, removing the attribute should work fine as well. Boolean attributes and DOM properties are tightly coupled. — Felix Kling, May 22 '14 at 16:44
The problem is that there are no functions with the names `habilita` and `dishabilita`, since your syntax is off. Check out a tutorial about functions, e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions — Felix Kling, May 22 '14 at 16:51
@FelixKling, oh, hm. i was under the impression that jquery only pretended that was the case historically. but it looks like you're right, my bad :) — Eevee, May 22 '14 at 20:46

War10ck · Accepted Answer · 2014-05-22T17:55:32.107

There are a couple of things that I believe will help you out. First, as @Eevee pointed out, you should use the .prop() function instead of the .attr() function when setting DOM properties.

Secondly, the syntax habilita : function() is used in objects. However, it does not appear that habilita or deshabilita are in an object (unless there is more to your code). I do not believe this is valid.

Try the following instead:

$('option#usa').click(function(){
    $('.inputText').prop('disabled', false);
});
var habilita = function() { 
    $(".inputText").prop('disabled', false);
};
var deshabilita = function() { 
    $(".inputText").prop('disabled', true); 
};

Issue removeAttr("disabled")

1 Answers1