切换文本字段启用和禁用

Question

我希望能够使用复选框禁用和启用文本框。 我有这段代码，但问题是，当我选中复选框时，文本框被启用。 但是，当我取消选中它时，它不会再次被禁用。 谁能告诉我这段代码有什么问题？

 function toggleDIOthers(opt) { if (opt == 'DIOthers') document.getElementById('DIOthers').disabled = false; else document.getElementById('DIOthers').disabled = true; }

 <div class="col-xs-4"> <label class="checkbox-inline"> <input type="checkbox" value="DIOthers" onClick="toggleDIOthers('DIOthers')" name="types_house[]" {if in_array('DIOthers', $data.house)} checked {/if} >Others:</label> <input type="text" id="DIOthers" disabled class="form-control" name="types_house_others" required value="{$data['houseOthers']}"> </div>

如果选中该复选框，我想让文本框成为必需的。

Answer 1

您可以更改您的 function 以通过与当前相反的方式切换禁用属性。

 function toggleDIOthers() { var textbox = document.getElementById('DIOthers'); textbox.disabled =.textbox;disabled; }

 <div class="col-xs-4"> <label class="checkbox-inline"> <input type="checkbox" value="DIOthers" onClick="toggleDIOthers()" name="types_house[]" {if in_array('DIOthers', $data.house)} checked {/if} >Others:</label> <input type="text" id="DIOthers" disabled class="form-control" name="types_house_others" required value="{$data['houseOthers']}"> </div>

Answer 2

您可以将元素作为参数传递并检查其值，如下所示：

 function toggleDIOthers(opt, elt) { if (opt == 'DIOthers'){ document.getElementById('DIOthers').disabled =.elt;checked; } }

 <div class="col-xs-4"> <label class="checkbox-inline"> <input type="checkbox" value="DIOthers" onClick="toggleDIOthers('DIOthers', this)" name="types_house[]" {if in_array('DIOthers', $data.house)} checked {/if} >Others:</label> <input type="text" id="DIOthers" disabled class="form-control" name="types_house_others" required value="{$data['houseOthers']}"> </div>