jquery如何禁用td答案

【问题标题】：jquery how to disable a tdjquery如何禁用td
【发布时间】：2019-02-26 10:20:11
【问题描述】：

我有下表

 <c:forEach items="${tablaserie.matriculas}" var="matricula" varStatus="loopmatricula">
    <input type="hidden" id="<c:out value="matricula-${loopmatricula.index}" />" value="<c:out value="${matricula.matricula}" />" />
    <tr>
    <td style="text-align:center"><c:out value="${matricula.matricula}" /></td>
        <c:set var="numeroceldas" value="${0}" />
        <c:forEach items="${matricula.listado}" var="celda" varStatus="loopcelda">
            <c:set var"identificadorcelda" value="${matricula.matricula}-${loopcelda.index}" />

            <c:choose>
                <c:when test="${celda.color eq '#ffffff' }" >       
                    <td  id="td-${identificadorcelda}" style="text-align:center;" onclick="displayCombo();" ><c:out value="${celda.nombre}" /></td>     
                    <input id="input-${identificadorcelda}" type="hidden" value="<c:out value="${celda.nombre}" />" />              
                </c:when>
                <c:otherwise>
                    <td  id="td-${identificadorcelda}" style="color:white;text-align:center;" bgcolor="<c:out value="${celda.color}"/>"  onclick="displayCombo();">
                        <c:out value="${celda.nombre}" />
                    </td>
                    <input id="input-${identificadorcelda}" type="hidden" value="<c:out value="${celda.nombre}" />" />      

                </c:otherwise>
            </c:choose>
    /c:forEach>
</tr>
</c:forEach>

我想禁用td。 td 的名字是

 id="td-${identificadorcelda}"

在$(document).ready()我有

if (tipoedicion == 0){
            $("td[id*=td]").prop('disabled', true);

        }
        else {
            $("td[id*=td]").prop('disabled',false);
        }

td 没有禁用，我可以点击它们。

如何禁用 td？

【问题讨论】：

完全禁用td 会完成什么？ td 元素没有 disabled 属性。
您的意思是要阻止onclick="displayCombo(); 执行吗？
顺便说一句，value="<c:out value="${celda.nombre}" />" 看起来很奇怪。 value="${celda.nombre}" 不也可以吗？
是的，我想阻止点击
然后你可以在td 上设置一个自定义属性（比如data-disabled），然后在displayCombo 函数中检查它。

标签： jquery html disable

【解决方案1】：

由于td 并没有真正的disabled 属性，如果您想阻止click 事件执行它的操作，您可以将自定义data-disabled 属性设置为您的tds .

所以在你的$(document).ready() 中你可以做这样的事情

if (tipoedicion == 0){
        $("td[id*=td]").attr('data-disabled', 'true');

    } else {
        $("td[id*=td]").attr('data-disabled', 'false');
    }
    // ...
}

然后，在您的displayCombo() 函数中，您可以检查该属性，如果td 将该属性设置为"true"，则返回，就像这样

function displayCombo() {
    if ($("td[id*=td]").attr('data-disabled') === 'true') {
        return;
    }
    // whatever it was doing before
}

【讨论】：

【解决方案2】：

td 没有 disabled 属性。它用于输入元素。您可以在 td 上隐藏鼠标光标并禁用选择。它会让它像禁用一样工作

$(document).ready(function() {
  $("#a").prop("disabled", true);
  $('#b').css({
    'cursor': 'none',
    'user-select': 'none'
  });
  $('#b').click(function(){return false})

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="b">sss</td>
</table>
<input id="a">

【讨论】：