Как отключить <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, поскольку атрибут disable работает только для <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>

см. Похожую вещь