Reputation: 1399
i have some td
s in a table.
all tds are selectable
.
<table id="selectable">
<tr>
<td class="ui-state-default" ></td>
<td class="ui-state-default" ></td>
<td class="ui-state-default" ></td>
</tr>
<tr>
<td class="ui-state-default" ></td>
<td class="ui-state-default" ></td>
<td class="ui-state-default" ></td>
</tr>
<tr>
<td class="ui-state-default" ></td>
<td class="ui-state-default" ></td>
<td class="ui-state-default" ></td>
</tr>
</table>
i want some td
s as not selectable. how to make it.please help
Upvotes: 1
Views: 1285
Reputation: 2834
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.not-selectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<table id="selectable">
<tr>
<td class="ui-state-default" >11</td>
<td class="ui-state-default" >222</td>
<td class="not-selectable" >33</td>
</tr>
<tr>
<td class="ui-state-default" >44</td>
<td class="not-selectable" >44</td>
<td class="ui-state-default" >44</td>
</tr>
<tr>
<td class="ui-state-default" >55</td>
<td class="ui-state-default" >55</td>
<td class="ui-state-default" >22</td>
</tr>
</table>
</body>
</html>
Upvotes: 1
Reputation: 299
Both solutions work, but with the second solution, it cancels all the event propagation.What I mean by that is I had a checkbox in a .not-selectable <td>
and it was not getting checked at all how many every times I click. Once I replaces the updated solution with var $el= code snippet, it started getting checked again. Thought it would help someone.
var $el = $(".not-selectable");
//alert($el.length);
if($el.length >0 ){
//Cannot select when there are class not-selectable
return false;
}
update
i found exact way
$(function () {
$("#selectable").selectable({
cancel: "td.not-selectable"
});
});
Upvotes: 0
Reputation: 1399
As Scott Mitchell said Added a class not-selectable
on the non-selectable elements.
var $el = $(".not-selectable");
//alert($el.length);
if($el.length >0 ){
//Cannot select when there are class not-selectable
return false;
}
update
i found exact way
$(function () {
$("#selectable").selectable({
cancel: "td.not-selectable"
});
});
Upvotes: 1
Reputation: 698
Here is a fiddle example using an event that would change the cell color to black http://jsfiddle.net/mpw0tkjL/
$( "#selectable td" ).on( "click", changeColor );
function changeColor( e ){
var $el = $( e.currentTarget );
if( !$el.hasClass( "not-selectable" ) ){
$( e.currentTarget ).css( "background", "black" );
} else {
alert( "dont change color" );
}
return;
}
Upvotes: 1