1

i have some tds 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 tds as not selectable. how to make it.please help

Improve this question
1
  • 2
    Add a class on the non-selectable elements then capture that in an event that cancels whatever you dont want to happen Commented Aug 10, 2014 at 18:04

4 Answers 4

Reset to default
1

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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

i found another simple solution.
Can you edit your post with your simpler solution then?
1

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"   
   });
});
Improve this answer

Comments

1 
    <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>
Improve this answer

Comments

0

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"   
   });
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answerâ€, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.