jquery how to disable a td

Question

I have the following table

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

I want to disable the td. The names of td are

 id="td-${identificadorcelda}"

In the $(document).ready() I have

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

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

The td don't disable and I can click in them.

How can I disable the td?

Answer 1

Since td doesn't really have a disabled attribute, if you want to prevent the click event from doing what it does, you could set a custom data-disabled attribute to your tds instead.

So in your $(document).ready() you can do something like this

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

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

Then, in your displayCombo() function you can check that attribute and just return if the td has that attribute set to "true", like this

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