JavaScript: Disabled button not grayed out

Question

1.00/5 (1 vote)

See more:

In my thread: JavaScript - Set control's disabled not successful[^], I reported a unsuccessful in setting a control's disability dynamically. When debugging on the code, the control value is correct. However, the control does not turn to gray color as its disabled=true. I feel that in somewhere in my HTML, there is something incorrect. How can this error be detected? Thanks.

JavaScript

function validate_Panel7() {
    debugger;
    var v = document.getElementById('btnValidate7');
    if (v.disabled == false)
        v.disabled = true;
    else
        return;
 }

Posted 3-Nov-15 6:51am

s yu

Updated 3-Nov-15 7:26am

v2

Add a Solution

Comments

phil.o 3-Nov-15 13:04pm

Still, you wrote v = true again, instead of v.disabled = true

s yu 3-Nov-15 13:27pm

My mistake on pasting. Should be v.disabled. I updated my original post. The problem still exists. I cleaned up the cache, but still unsolved.

Palash Mondal_ 4-Nov-15 0:12am

I think this might be a css issue. Just check the css applied to button in the developer tools.

2 solutions

Solution 2

C#

$(document).ready(function() {
     $('input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $('input[type="submit"]').prop('disabled', false);
        }
     });
 });

Posted 4-Nov-15 18:56pm

Member 12112969

Updated 4-Nov-15 18:57pm

Comments

s yu 5-Nov-15 15:32pm

Eventually, I found the problem. It was due to the .js I downloaded from website. In general, I could not revise it at all. Based on my observations, I added an extra but empty 'div' block as the last 'div' block, the problem to set a control's property in the last but one 'div' block' was gone. Thanks for the 2 solution posts. I could only credit one of them. Since SA responded first, I would make the credit to him. Thanks again.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-11-03T07:55:00

It should work, in a way, on certain conditions.

It may not work by different reasons. For example, document.getElementById can return null because the element may not be found; "btnValidate7" should be the value of the attribute id of wanted element, moreover, all id values should be unique in the context of the whole page. One invalid id value can make the whole page incorrect. In this case, here is what happens next: v.disabled tries to refererence v, which is null, which in turn throws an exception which you simply don't see because you are not handling exceptions. In the browsers, unhandled JavaScript exceptions are blocked on top; they are left unnoticed.

In other cases, it may happen that the found element is not an input element; with such elements, you cannot use disabled. Also, I cannot see where this function is called; I don't know if it is called at all or on what stage of execution it is called. What if the element is not yet created or not rendered?

Why, after all, you put this debugger statement? If you need to debug code, actually debug it. You will see all values of all object on each step.

Here is a complete minimal HTML with script for you to compare; it does work:

XML

<html>
    <head>
        <title>Test disabled</title>
    </head>
<body>

<button id="btnValidate7">Test</button>

<script>
function validatePanel() {
    var v = document.getElementById('btnValidate7');
    v.disabled = true;
}
validatePanel();
</script>

</body>
</html>

This is not the biggest problem you have. Much bigger problem is how you do programming (and ask questions) in general. For example, look at your "if". Probably, you wanted to disable an element if it is not disabled. But why checking for it? If the element is not disabled, it will be disabled, if it is already disabled, it will remain disabled. So, why would you need this check. Besides, the check is not really correct. First, you need to make sure v is not null or undefined, by the reasons I explained in first paragraph, but let's say you already debugged the code and made sure it is a valid input element. You already know that v.disabled is true of false. But then it would be enough to check if (!v.disabled). I'm just using your example, in fact, the whole check in pointless. Besides, you need to know what if returns for different operands, and learn about real meaning of ==, !==, === and !== operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators[^].

Let's see… Your first question if of July 2014. Even if it was time you started to learn programming, this time would be enough to learn programming basics. Yes, you are still a beginner, but not to the extent where this fact can be used for excuses. :-)

—SA