[英]How to disabled the <td> based on the input field
HTML 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: Javascript:
$(function () {
($("#X").keyup(function (){
if ($("#X").val() == 'X') {
('.haha').prop('disabled',true);
}else{
('.haha').prop('disabled', false);
}
})
};
);
How to disable the td class="haha" based on the input field.如何根据输入字段禁用 td class="haha"。 For example, if I type X in the input field it automatically disabled the td class="haha" is it possible?
例如,如果我在输入字段中输入 X,它会自动禁用 td class="haha" 是否可能?
I'm not sure what you mean by disable td
since the disable attribute work just for <input> tag
.However You can do something like adding and removing class depending upon your condition.我不确定
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.