Setting Attribute Disabled on a Span Element Does Not Prevent Click Events

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

  1. 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.
  2. Use CSS to style the list item.
  3. Update handleAnswer to set the "settled" state and increment the word index.
  4. 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

Edit prevent-an-onclick-event-on-a-span-element-when-it-was-clicked-once

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:



Leave a reply



Submit