CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-ui-selectable
Nisham Mahsin
Nisham Mahsin

Reputation: 1399

Make some elements not selectable jquery ui

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

Upvotes: 1

Views: 1285

Answers (4)

Jobelle
Jobelle

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

user3557236
user3557236

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

Nisham Mahsin
Nisham Mahsin

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

Scott Mitchell
Scott Mitchell

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

Related Questions