Prevent onClick to fire on disabled span
Instead of using disabled prop use styles to show disabled
<span
className={`btn badge ${!this.props.enabled && disabledClass}`}
onClick={this.props.enabled && (() => alert('Added!'))}
>
<span className="glyphicon glyphicon-plus" />
or even better for semantic and accessibility purpose.
<button
className="btn badge"
onClick={() => alert('Added!')}
disabled={this.props.enabled !== true}
>
<span className="glyphicon glyphicon-plus" />
</button>
I didn't test it but It should work.
How to disable an onclick option in span?
I guess the clicking on the span does not fire any event if not specified, means this is more a design issue
If there is a hand-cursor coming up as soon as you hover you can spcecify this by the cursor attribute in css:
.someclass {
cursor: default
}
Another possibility if there is some event fireing as seen here:
Use CSS to make a span not clickable
<span class='unclickable' onclick='return false;'>description<br></span>
How to disable click event on span tag - Angular 6
I think you can use an "early return" in DeleteHour(i) to disable the action.
const DeleteHour = (i) => {
if (isDisabled(list[i])) return;
// ...rest of the function
}
For the part "disable visually" I guess it is like changing something visual if it is disabled. If yes you can do something like this :
<span class="<some_class>" (click)="DeleteHour(i)">{{ isDisabled(item) ? '' : 'X' }}</span>
You can (and maybe should instead) also use a button and use the css pseudo-class delete-hour:disabled { ...styles }
:
<button class="delete-hour" (click)="DeleteHour(i)" [disabled]="isDisabled(item)">X</button>
Prevent an onClick event on a span element when it was clicked once
The main issue with your code is incorrect use of React refs to manipulate DOM elements.
Solution
- Store a "settled" state array initialized to null values to indicate if a word has been marked true/false. Same condition is used to prevent further "click" handling.
- Use CSS to style the list item.
- Update
handleAnswer
to set the "settled" state and increment the word index. - Use an
useEffect
hook to update the words to display.
Code:
const wordsToGuess = ["chambre", "salon", "rire", "fusée"];
const App = () => {
const [indexWord, setIndexWord] = useState(0);
const [wordToDisplay, setWordToDisplay] = useState([]);
const [settled, setSettled] = useState(Array(wordsToGuess.length).fill(null));
useEffect(() => {
setWordToDisplay(wordsToGuess.slice(0, indexWord + 1));
}, [indexWord]);
const handleAnswer = (index, answer) => () => {
if (settled[index] === null) {
setSettled((settled) =>
settled.map((el, i) => (i === indexWord ? answer : el))
);
if (indexWord < wordsToGuess.length - 1) setIndexWord((i) => i + 1);
}
};
return (
<ul className="word__list">
{wordToDisplay.map((word, i) => (
<li
key={i}
className={classNames("word__item", {
"settled-true": settled[i] === true,
"settled-false": settled[i] === false
})}
>
<p className="word">{word}</p>
<div className="icon-box">
<span onClick={handleAnswer(i, false)}>
<FontAwesomeIcon icon={faTimes} color={"#FF5252"} />
</span>
<span onClick={handleAnswer(i, true)}>
<FontAwesomeIcon icon={faCheck} color={"#008000"} />
</span>
</div>
</li>
))}
</ul>
);
};
CSS:
.settled-true {
background-color: #5dcf36;
}
.settled-false {
background-color: #d15f5f;
}
Demo
Javascript span button enable/disable on Chrome
I have a button
No, you don't. You have a span
. span
elements have no disabled
property, because they are not interactive elements:
console.log("disabled" in document.createElement("span")); // false
Disable a particular span using jQuery
For enable or disable a span, you could do it like this:
var isEmpty = false;
$('#myDiv > input').keyup(function(){
isEmpty = false;
$('#myDiv > input').each(function(i,obj){
if(this.value == ""){
isEmpty = true;
return false;
}
});
// Styles for the span.
if( ! isEmpty){
$('#myDiv > span').removeClass('disabled');
} else {
$('#myDiv > span').addClass('disabled');
}
});
$('#myDiv > span').click(function(){
if(isEmpty){
alert("disabled");
} else {
alert("enabled");
}
});
Related Topics
Mobile Redirect Using Htaccess
Is a Url Allowed to Contain a Space
Using Relative Url in CSS File, What Location Is It Relative To
How to Remove Margin Space Around Body or Clear Default CSS Styles
Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One
Browsers' Default CSS For HTML Elements
Canvas Width and Height in Html5
Are the Decimal Places in a CSS Width Respected
Applying a Background to ≪Html≫ And/Or ≪Body≫
How to Style the Parent Element When Hovering a Child Element
Why Does HTML Think "Chucknorris" Is a Color
Difference Between Id and Name Attributes in Html
Setting the Width of Inline Elements
Floated Elements of Variable Height Push Siblings Down
Why Aren't My Absolutely/Fixed-Positioned Elements Located Where I Expect