Click here to Skip to main content
13,736,502 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
Im having an issue with jquery's .hasClass

i have a table with some data inside and i am trying to create a custom function for when i click on a table row to set it with the class 'selected' and then get the data-id of the clicked tr then i want to set a button from disabled='disabled' to enabled.

I have managed to get the function to set the clicked table row with the class 'selected' but when i click on the class again i want it to remove the class 'selected' and then set the button to disabled again and the hasClass method is returning false on the table row for 'selected' so i cant set it to deselect the row and disable the button again...

the table is html:

<table class="table table-hover">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Comments</th>
<th>Created</th>
<th>Due</th>
<th>Creator</th>
<th>%</th>
<th>Type</th>
</tr>
</thead>
<tbody id="taskstbody"><tr class="table-row  taskGrpRow" data-id="chkTask1" id="chkTask1">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Test Task</td>
<td class="taskGrpRow">This is a task example</td>
<td class="taskGrpRow">1 week ago</td>
<td class="taskGrpRow">in 2 Weeks </td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">0%</td>
<td class="taskGrpRow"> To Do</td>
</tr><tr class="table-row alert-warning taskGrpRow" data-id="chkTask2" id="chkTask2">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Example Task</td>
<td class="taskGrpRow">Example of an overdue task</td>
<td class="taskGrpRow">2 months ago</td>
<td class="taskGrpRow"> Due 4 Weeks ago</td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">3%</td>
<td class="taskGrpRow"> Follow Up</td>
</tr><tr class="bg-success table-row fh-checkbox taskGrpRow selected" data-id="chkTask3" id="chkTask3">
<td></td>
<td>Example Task</td>
<td>Example of a completed task</td>
<td>1 month ago</td>
<td>1 Week ago</td>
<td>admin</td>
<td>100%</td>
<td> To Do</td>
</tr></tbody>
</table>


the function for my table row click:

<script> 
$(document).ready(function(){

var prevSel ="";
var taskid = "";

	$("tr.table-row.taskGrpRow").click(function() {
		
		var _prevSel = "#" + prevSel;
		var _curSel = "#" + $(this).data("id");
		//only one task selection at a time so check if the previous selection is set and remove selected class
		
		if(_prevSel === "#"){
		
		console.log("Previous Selection: Empty");
		
		}else if(  _prevSel !== undefined && _prevSel !==  _curSel){
		
		
		}else{
		
		console.log("Previous Selection:" + _prevSel);
		
		$(_prevSel).removeClass("selected");
		
				
		}
		

		
		var taskid = $(this).data("id");
		
		console.log("Task Selected: " + taskid); 
		
	var itemSelected = "#" + taskid;	
	var classSelected = $(itemSelected).hasClass("selected");
	
	console.log($(itemSelected).className + " | " + classSelected);
	
	console.log($(this));
	
	if(classSelected === true){
	
	console.log("Class '.selected Present' on " + $(this).attr("id"));
	$(itemSelected).removeClass("selected");
	$("#selectedTaskDropdown").prop("disabled", true);
	
	}else{
	
	console.log("Class '.selected Not Present' on " + $(this).attr("id"));
	
	$(this).addClass("selected");
	$("#selectedTaskDropdown").prop("disabled", false);
	}
	
	prevSel = taskid;
		
	});
	
})

</script>


classSelected is returning false and when i check the developer console for inspect element the table row has the class 'selected' so i am really stumped as to why jquery isnt returning hasClass as true..

any help would be great,

thanks in advance.

What I have tried:

i have tried using a html selector '#chkTask3', using $(this) and none of them work. each way its returning false, i really dont understand why its returning false when the DOM clearly shows that the table row with id 'chkTask3' has the class 'selected' in the class element.

ive even tried to replicate the whole thing on jsfiddle and its doing the same on there too

select row and enable a button - JSFiddle[^]
Posted 13-Oct-18 8:23am
Updated 5 days ago
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Try commenting out this line, I think the code below it get confused that the class been removed.
$(_prevSel).removeClass("selected");


I'm guessing, you also want the code to remove the previously selected row class when a new row is being selected. Then add the below code in the else statement. Refer to the example.

if(_prevSel !== "#"){
  	$(_prevSel).removeClass("selected");
  }


Example:
select row and enable a button - JSFiddle[^]
  Permalink  
Comments
5 days ago
   
Hey thanks for your help! It's actually helped me solve the issue. The code was getting confused so i changed the if statement to check if it's undefined first then check if it's not the same item clicked as previously clicked and then it allowed me to select and deselect 🙌🙌🙌
5 days ago
   
http://jsfiddle.net/6hf98k72/9

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01-2016 | 2.8.180920.1 | Last Updated 13 Oct 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100