使某些元素不可选择 jquery ui答案

【问题标题】：Make some elements not selectable jquery ui使某些元素不可选择 jquery ui
【发布时间】：2014-08-10 18:01:41
【问题描述】：

我在table. 中有一些tds 所有 td 都是 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>

我想要一些 tds 不可选择。如何制作。请帮忙

【问题讨论】：

在不可选择的元素上添加一个类，然后在取消你不想发生的任何事情时捕获它

标签： jquery html css jquery-ui jquery-ui-selectable

【解决方案1】：

这是一个使用将单元格颜色更改为黑色的事件的小提琴示例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;
}

【讨论】：

我找到了另一个简单的解决方案。
你能用更简单的解决方案编辑你的帖子吗？

【解决方案2】：

正如 Scott Mitchell 所说，在不可选择的元素上添加了一个类not-selectable。

var $el = $(".not-selectable");
        //alert($el.length);
         if($el.length >0 ){
            //Cannot select when there are class not-selectable
            return false;
        }

更新

我找到了确切的方法

$(function () {
   $("#selectable").selectable({
      cancel: "td.not-selectable"   
   });
});

【讨论】：

【解决方案3】：

    <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>

【讨论】：

【解决方案4】：

两种解决方案都有效，但使用第二种解决方案，它取消了所有事件传播。我的意思是我在 .not-selectable <td> 中有一个复选框，并且根本没有检查每个有多少我点击的次数。一旦我用 var $el= code sn-p 替换了更新的解决方案，它就会再次开始检查。认为它会对某人有所帮助。

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

【讨论】：