Question

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

我希望某些td不可选。如何制作它。请帮助

Answer 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;
}

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

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

Answer 4

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

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

使一些元素不可选择jquery ui

4 个答案: