modmedia
asked on
Javascript labeling a disabled button incorrectly...
There is a piece of javascript that causes a button to be "disabled" if the user hasn't picked an option yet. The problem is that when I check the rendered code, the attribute for that button says disabled=" "... What I need it is to say disabled="disabled" in order to style it's disabled state in CSS.
Here is the javascript code:
Basically the output is rendering the following HTML for the button:
What I need it to do is render the "disabled" attribute like this:
This will allow me to style CSS of the "disabled" state of the button properly in IE.
Here is the javascript code:
setCheckBtn = function(){
var isFlashCard = '';
$( ".q-check-btn", currQuiz ).unbind();
if( settings.showAns ){
//replaceWith forces the toggle() to reset on check-btn.
$( ".q-check-btn", currQuiz ).replaceWith(
$( ".q-check-btn", _jQuizMeLayOut ).clone(true)
);
$( ".q-check-btn", currQuiz ).attr( "disabled", settings.blockCheck ).toggle(
function( e ){
$( e.target ).attr( "value", lang.btn.next[0] );
isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
displayAnsResult( isFlashCard );
e.preventDefault();
},
function( e ){
$( e.target ).attr( { "disabled": settings.blockCheck, "value": lang.btn.check[0] });
nextMove();
e.preventDefault();
}
);
}
else{
$( ".q-check-btn", currQuiz ).attr( {"disabled": settings.blockCheck, "value": lang.btn.next[0] } )
.click( function( e ){
$( e.target ).attr( "disabled", settings.blockCheck );
isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
displayAnsResult( isFlashCard );
nextMove();
e.preventDefault();
}
);
}
},
Basically the output is rendering the following HTML for the button:
<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="">
What I need it to do is render the "disabled" attribute like this:
<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="disabled">
This will allow me to style CSS of the "disabled" state of the button properly in IE.
ASKER
I am actually not very fluent in javascript... how would I implement the above code in the scenario I posted?
I don't know what you're trying to do and the context and how...
The only line I see here is line 27 :
$( e.target ).attr( "disabled", settings.blockCheck );
So try to replace it with :
$( e.target ).attr("disabled","disable d");
The only line I see here is line 27 :
$( e.target ).attr( "disabled", settings.blockCheck );
So try to replace it with :
$( e.target ).attr("disabled","disable
ASKER
The "blockCheck" attribute is a toggle earlier in the code that makes the "check" button disabled until the user selects an answer. Here is a reference to the application in action:
http://clients.themodmedia.com/blueriver
http://clients.themodmedia.com/blueriver
What about line 3 :
$( ".q-check-btn", currQuiz ).attr("disabled","disable d");
$( ".q-check-btn", currQuiz ).attr("disabled","disable
or after line 4
ASKER
none of those seemed to work. The logic is like this:
I can toggle the application to either allow the "check" button to be always active, or only become active after a user selects an answer from the list. That is what the blockCheck attribute is referring to. So in my HTML file, I can set blockCheck= true, or blockCheck=false to toggle that functionality.
I want the button to be disabled (blockCheck= true) but it the final HTML of the button just isn't rendering correctly as stated above.
All I am trying to do is style the "disabled" state of the button so it doesn't look like it does in IE. By not having the "disabled" attribute stated correctly, IE is ignoring any styles related to "disabled"
If you go to http://clients.themodmedia.com/blueriver, you can see what I am referring to in context.
pastedGraphic.tiff
I can toggle the application to either allow the "check" button to be always active, or only become active after a user selects an answer from the list. That is what the blockCheck attribute is referring to. So in my HTML file, I can set blockCheck= true, or blockCheck=false to toggle that functionality.
I want the button to be disabled (blockCheck= true) but it the final HTML of the button just isn't rendering correctly as stated above.
All I am trying to do is style the "disabled" state of the button so it doesn't look like it does in IE. By not having the "disabled" attribute stated correctly, IE is ignoring any styles related to "disabled"
If you go to http://clients.themodmedia.com/blueriver, you can see what I am referring to in context.
pastedGraphic.tiff
>I want the button to be disabled (blockCheck= true) but it the final HTML of the button just isn't rendering correctly as stated above.
Where do you do it?
Where do you do it?
Try this :
setCheckBtn = function(){
var isFlashCard = '';
$( ".q-check-btn", currQuiz ).unbind();
if( settings.showAns ){
//replaceWith forces the toggle() to reset on check-btn.
$( ".q-check-btn", currQuiz ).replaceWith(
$( ".q-check-btn", _jQuizMeLayOut ).clone(true)
);
$( ".q-check-btn", currQuiz ).attr( "disabled", settings.blockCheck ).toggle(
function( e ){
$( e.target ).attr( "value", lang.btn.next[0] );
isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
displayAnsResult( isFlashCard );
e.preventDefault();
},
function( e ){
$( e.target ).attr( { "disabled": settings.blockCheck, "value": lang.btn.check[0] });
nextMove();
e.preventDefault();
}
);
}
else{
$( ".q-check-btn", currQuiz ).attr( {"disabled": settings.blockCheck, "value": lang.btn.next[0] } )
.click( function( e ){
$( e.target ).attr( "disabled", settings.blockCheck );
isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
displayAnsResult( isFlashCard );
nextMove();
e.preventDefault();
}
);
}
if( $(".q-check-btn", currQuiz ).attr("disabled") == "" ) $(".q-check-btn", currQuiz ).attr("disabled", "disabled");
},
ASKER
If you look at http://clients.themodmedia.com/blueriver/js/jQuizMe-uncompressed.js , line 153, you can see the toggle option.
ASKER
That didn't work... the HTML still renders the button like this:
<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="">
<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="">
I'm not sure the problem is how the html is rendering...
better : << how you see the html rendered >>
ASKER
well, right... I'm sure it's the block of javascript that is rendering it that way. I just don't know why it still renders it blank (disabled="") instead of like it should (disabled="disabled")
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
no dice...
of topic(?) replace :
<div id="quizArea"/>
by :
<div id="quizArea"></div>
ASKER
done... still nothing
Initially (in the html code) could you confirm the state of the button ?
disabled="" ?
disabled="" ?
ASKER
Yes that is correct. I'm not sure if you're familiar with Firebug, but using it will show you how it's rendering
>Yes that is correct.
Initally set it like this : disabled="disabled"
Use firebug and check this :
Initally set it like this : disabled="disabled"
Use firebug and check this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>
ASKER
Right... now try this:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
input[disabled="disabled"] , input.disabled {
}
</style>
<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>
[/code]
And see how the style works on one, but not the other.
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
input[disabled="disabled"]
}
</style>
<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>
[/code]
And see how the style works on one, but not the other.
that's why I said use : << Initally set it like this : disabled="disabled" >>
ASKER
Both methods functionally make the button disabled, which is fine. What I am trying to do is get the CSS styles to cooperate with the disabled state. Since the button is rendering disabled="", the CSS style input[disabled="disabled"] doesn't work.
I cannot go in manually and set the button to disabled="disabled" because it is the javascript that is generating the button dynamically.
I cannot go in manually and set the button to disabled="disabled" because it is the javascript that is generating the button dynamically.
Check this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
input[disabled="disabled"], input[disabled=""] {
color:#F36
}
</style>
</head>
<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>Is there any specific IE CSS style that can override that?
If possible use readonly instead disabled...
https://www.experts-exchange.com/questions/26438982/Set-background-color-of-disabled-TextBox.html
https://www.experts-exchange.com/questions/21830973/change-color-to-disabled-inputs.html
If possible use readonly instead disabled...
https://www.experts-exchange.com/questions/26438982/Set-background-color-of-disabled-TextBox.html
https://www.experts-exchange.com/questions/21830973/change-color-to-disabled-inputs.html
Check this (at the end for disabled button) : http://www.webreference.com/programming/css_stylish/
ASKER
It seems like the "readonly" makes the button not work completely (even after a user selects an answer).
I think at this point I am just going to disable the blockCheck toggle, and keep the "check" button enabled the whole time.
I think at this point I am just going to disable the blockCheck toggle, and keep the "check" button enabled the whole time.
you may use the onclick attribute of the button to check the blockCheck value and decide to "return false" or not
Thanks for the points!
$(".q-check-btn").attr("di
or in
$(".q-check-btn").each(fun
$(this).attr("disabled","d