0

Hi I have a method to disable a select:

function setPersons(adultos){
    document.getElementById("perselect").value = adultos; 
    document.getElementById("perselect").disabled = true;
}

That is called when I load my website. This work without problem.

My problem is when I try to enable it again with a button inside the form.

This is the button code:

<button class="button-big" name="disp" value="clean" id="save" type="button">Limpiar fecha</button>

And this is the method in jQuery to catch it:

$('#save').on('click', function(e) {
    document.getElementById("perselect").disabled=false;
    document.getElementById("ninselect").disabled=false;                    
});

The select is disabled when the pages loads, but if I press the button, the click event is called (I put an alert inside to check it), but the select is always disabled.

What could be happening?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Abraham
  • 189
  • 1
  • 18
  • you wouldn't happen to be repeating the `perselect` and `ninselect` ids in the html, would you? – Taplar Mar 13 '19 at 17:08
  • Possible duplicate of [Explicitly set disabled="false" in the HTML does not work](https://stackoverflow.com/questions/32745276/explicitly-set-disabled-false-in-the-html-does-not-work) – esqew Mar 13 '19 at 17:08
  • Is there another with same id? `console.log( $("#perselect").length)` – freedomn-m Mar 13 '19 at 17:08
  • @esqew they are changing the property here, not the attribute – Taplar Mar 13 '19 at 17:09
  • If I recall correctly, the presence of the disabled attribute (even set to false) may be auto disabling your element. Try removeAttribute()? https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute#Example – Doug Mar 13 '19 at 17:10
  • 1
    @esqew guess it depends on the browser / decade... (ok your link was 5 years ago, not 10) - try: https://jsfiddle.net/nL0pkw5d/ – freedomn-m Mar 13 '19 at 17:10
  • @Doug you recall correctly. `` and `` would disable the button as it (used to be? is?) a value-less attribute (or a boolean attribute) - see: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes looks like some browsers now handle these more intuitively. – freedomn-m Mar 13 '19 at 17:23
  • https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled MDN reference. "Visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state." Though, if there are discrepencies in browsers not treating disabled = false on the DOM element as removing it, seems like the safest bet would be to use the removeAttribute(). – Taplar Mar 13 '19 at 17:33
  • Hi! in answer to you the Id is unique, and I only call these methods one time each one. So the problem with the id repeated and a doble call to the method, isnt posibble. – Abraham Mar 13 '19 at 18:19

2 Answers2

2

Setting the disabled attribute to false on a select control doesn't actually re-enable the control. Most browsers will re-enable controls when the disabled attribute is removed entirely:

$(document).ready(function() {
  document.getElementById("combobox").disabled = true;
});

$("#btn-enable").on('click', function() {
  document.getElementById("combobox").removeAttribute("disabled");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-enable">Enable</button>
<select id="combobox">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
esqew
  • 42,425
  • 27
  • 92
  • 132
  • Bit odd using native JS methods within jQuery event handlers. Especially when `prop('disabled', true|false)` will work. – Rory McCrossan Mar 13 '19 at 17:27
  • In your answer document.getElementById("combobox").disabled = true; is incorrect to set – takrishna Mar 13 '19 at 17:53
  • I tried the example , and with "prop('disabled', false)". And dont work . I have no idea why , in other cases this works for me. – Abraham Mar 13 '19 at 18:20
0

"Disabled" is a Boolean attribute.

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

To elaborate further, it is wrong to set Element-dot-Disabled = true

$(document).ready(function() {
  document.getElementById("combobox").setAttribute("disabled","");

});

$("#btn-enable").on('click', function() {
  document.getElementById("combobox").removeAttribute("disabled");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>
  <select checked name=one disabled> 
    <option>abc</option>
    <option>123</option>
  </select>
</label>observe that "disabled" attribute is present in the tag

<br>

<label>
  <select checked name=two> 
    <option>def</option>
    <option>456</option>
  </select>
</label>observe that "disabled" attribute is NOT present in the tag

<br>
<br>
Your code snippet:
<br>

<label>
  <select checked name=combobox id=combobox> 
    <option>ghi</option>
    <option>7890</option>
  </select>
</label>Boolean attributes are considered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (not null)when using Element-dot-setAttribute

<br>

<button id="btn-enable">Enable it Button!</button>

Read more at https://www.w3.org/TR/html5/infrastructure.html#sec-boolean-attributes

takrishna
  • 4,884
  • 3
  • 18
  • 35
  • @Abraham why don't you try the code snippet - it has a working example - if something is not working could you please explain what is not working ? - I just saw you reply to a answer above - if you read my comment in the snippet - "you should specify the empty string ("") in value (not null not false)" - because the value you give is parsed as a String. – takrishna Mar 13 '19 at 18:25
  • I see that the snippet works. And I change my code to add this: $(document).ready(function() { document.getElementById("combobox").setAttribute("disabled",""); }); $("#btn-enable").on('click', function() { document.getElementById("combobox").removeAttribute("disabled"); }); . Changing it with the corretc id, etc. But nothing changes. The select is disabled, but never enabled. I dont know why on my code dont work. Thanks ! – Abraham Mar 13 '19 at 18:27
  • Do you see any error on the console ? I would want to verify if you have any duplicate ID or something else – takrishna Mar 13 '19 at 18:30
  • Anything, I chek all the code and the console is clean, and there is only 1 element with this ID. This is the strange... I dont know why it happens – Abraham Mar 13 '19 at 18:33
  • you can check that ID in tag must not contain # - i guess your click function is not being called - other wise you would see some error - you can place some console logs and verify if it is being called at all – takrishna Mar 13 '19 at 18:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189964/discussion-between-takrishna-and-abraham). – takrishna Mar 13 '19 at 18:37
  • I just did it, and the button call the correct method in jquery (I use alerts), and it show all the alerts in the correct way, and one alert after and before the "document.getElementById("combobox").removeAttribute("disabled");" , but it dont do anything. No duplicates Id, and no erros. – Abraham Mar 13 '19 at 18:40