[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1242
  • Last Modified:

Dropdown disable not working in JQuery or Javascript

I have a JavaScript function that used to work until upgrading to IE 11.  It also doesn't work in either Chrome or FireFox.  

The dropdown is disabled by default, but enabled when a checkbox is changed.

As you can see from the code, I've tried removeAttribute, disabled = false, and finally JQuery.  None seems to be enabling the dropdown.  The alerts show the correct attributes, but in the source it still shows disabled='disabled'.

Any help would be greatly appreciated.

Here's the javascript/JQuery:

        function enableDropDownList(cb) {
            var chkbx = document.getElementById(cb);
            var number = cb.match(justTheDigits);
            var ddlname = "gvCylinderInfo_ctl" + number + "_ddlQtyReassign";
            var ddl = document.getElementById(ddlname);
            //ddl.setAttribute('disabled', 'disabled');
                    alert(ddl.disabled);  //This shows up as 'true'
            if (chkbx.checked) {
                $(ddl).each(function () {
                    this.disabled = false;
                });
                    alert(ddl.disabled);  //This shows up as 'false' - just what I want.
                //ddl.removeAttribute('disabled');
                //ddl.disabled = false;
                document.getElementById('selectCylsPrompt').style.display = 'none';
                document.getElementById('chooseC').style.display = 'block';

            }
            else {
                ddl.disabled = true;
                document.getElementById('selectCylsPrompt').style.display = 'block';
                document.getElementById('chooseC').style.display = 'none';
            }

            enableModify();
        }

Open in new window

When I view source it shows:

<select name="ddlSystem" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ddlSystem\&#39;,\&#39;\&#39;)&#39;, 0)" disabled="disabled" id="ddlSystem" class="arial8ptBlack">

Still disabled.

Any ideas?  Thanks.
0
IKtech
Asked:
IKtech
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/98EjC/

I see : var ddlname = "gvCylinderInfo_ctl" + number + "_ddlQtyReassign";
By you dropdown ID is just : ddlSystem

$("#ddlSystem").removeAttr("disabled");
0
 
Sar1973Commented:
In JS you must set a true/false boolean value, such as: document.getElementById("myDropdown").disabled=true/false.
Try then to replace disabled="disabled" with disabled="true".
0
 
leakim971PluritechnicianCommented:
@Sar1973 :
Without jQuery the RIGHT way is to use setAttribute() and removeAttribute()

https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute
https://developer.mozilla.org/en-US/docs/DOM/element.removeAttribute
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Sar1973Commented:
0
 
leakim971PluritechnicianCommented:
@Sar1973

That will NOT work everytime
Be very careful with W3School resources
0
 
IKtechAuthor Commented:
This was only part of it.  There were a few elements disabled.  I just needed to find all of them and do a removeAttribute.

Thanks!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now