I am currently grappling with a situation involving a table with 5 <td> elements. By default, these <td> are red in color. If the user clicks on one of them for the first time, it changes to blue. Subsequent clicks turn it orange and then back to red, repeating this cycle.
My goal is to prevent the user from selecting a new <td> if any other element already has a blue or orange color. In such cases, an alert should inform the user to "Un-select your previous choice" before allowing them to proceed. The previously selected <td> would revert to red upon selection of a new one.
Below is a snippet of my code:
$(".OpnSeat").on('click', function(e) {
if ($(this).attr("class") == "OpnSeat seat_td") {
$(this).addClass('openM seat_td');
} else if ($(this).attr("class") == "OpnSeat seat_td openM") {
$(this).removeClass('openM seat_td');
$(this).addClass('openF seat_td');
} else if ($(this).attr("class") == "OpnSeat openF seat_td") {
$(this).removeClass('openM seat_td openM');
$(this).removeClass('openF seat_td openM');
$(this).addClass('OpnSeat seat_td');
}
});.seat_td {
width: 60px;
margin-right: 10px
}
.OpnSeat {
color: red;
border: 2px solid red;
}
.openM {
color: blue;
border: 2px solid blue;
}
.openF {
color: orange;
border: 2px solid orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="OpnSeat seat_td">
<p class="intxt">1</p>
</td>
<td class="OpnSeat seat_td">
<p class="intxt">2</p>
</td>
<td class="OpnSeat seat_td">
<p class="intxt">3</p>
</td>
<td class="OpnSeat seat_td">
<p class="intxt">4</p>
</td>
<td class="OpnSeat seat_td">
<p class="intxt">5</p>
</td>
</tr>
</table>FOLLOW THIS LINK TO VIEW THE FUNCTIONING JSFIDDLE
Please excuse any language limitations in my explanation. Any suggestions or guidance on this matter would be greatly appreciated.