如何禁用<td>基於輸入字段

Question

HTML

<input type="text" name="haha"  id="X" >
<td style="width: 5%;" class="haha"><svg class="teeth svg" id="svg"
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
 </g>
</svg></td>

Javascript：

 $(function () {
  ($("#X").keyup(function (){
      if ($("#X").val() == 'X') {
          ('.haha').prop('disabled',true);
      }else{
          ('.haha').prop('disabled', false);
      }
  })
 };
);

如何根據輸入字段禁用 td class="haha"。 例如，如果我在輸入字段中輸入 X，它會自動禁用 td class="haha" 是否可能？

Answer 1

我不確定disable td是什么意思，因為禁用屬性僅適用於<input> tag但是，您可以根據自己的條件執行添加和刪除類之類的操作。

 $("#X").keyup(function (){ if ($("#X").val() == 'X') { $('.haha').addClass('unselectable'); }else{ $('.haha').removeClass('unselectable'); } })

 #svg{ border : 1px solid green; } .unselectable{ background-color: #ddd; cursor: not-allowed; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <table> <tr> <input type="text" name="haha" placeholder="enter X to see result" id="X" > <td style="width: 5%;" class="haha"><svg class="teeth svg" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet"> <!-- upper right 8 --> <g id="molar-group" class="molar"> <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/> <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/> </g> </svg></td> </tr> </table>

看到類似的東西