Question

如何默认禁用文本框，让用户通过复选框启用它？

<input type="checkbox" id="sccb" name="science" value="science">
<script type="text/javascript">
    $(document).ready(function(){
    $('#sccb').click(function(){
    if (this.checked) {
    $('#cns').removeAttr("disabled");
    }
    else {
    $("#cns").attr("disabled", true);
    }
    });
    });
</script>

<input type="text" id="cns" name="coornamescience" disabled="disabled" size="30"></input>

Answer 1

将disabled="disabled"用于文本框，然后使用JS/jQuery启用点击

演示 - http://jsfiddle.net/jaCmE/

<textarea rows="4" cols="50" disabled="disabled" id="mytextbox">
</textarea>

<input type="checkbox" id="checkbox1" />

然后像这样使用Javascript/jQuery -

$(document).ready(function(){
    $('#checkbox1').click(function(){
    if (this.checked) {
    $('#mytextbox').removeAttr("disabled");
    }
    else {
    $("#mytextbox").attr("disabled", true);
    }
    });
});

Answer 2

使用JavaScript，首先禁用文本框。然后在复选框中添加change事件处理程序。在其中，将文本框的禁用状态设置为与已检查状态相反。

Answer 3

您可以通过javascript在页面加载时禁用文本框，然后在复选框中添加一个事件以重新启用文本框。

Answer 4

<script type="text/javascript">
function disenable(e) {
  e[0].disabled = e[1].checked ? "" : "disabled"
}
</script>
<form action="">
<input type="text" disabled="disabled"><br>
<input type="checkbox" onchange="disenable(this.form)">Click me
</form>

这里e是表格，e [0]是第一个输入（文本框），e [1]是第二个输入（复选框）。当复选框更改时，它调用disenable将表单作为输入传递，该函数将删除或设置文本框的禁用参数，并将其设置为已检查状态。

Answer 5

您可以使用jquery来定位复选框，如果启用了复选框，则禁用文本框，反之亦然。 HTML：

<form action="">
<input type="text" name="box" id="mytext" />
<input type="checkbox" name="check" id="mycheckbox" />
</form>

Js：

    $(function(){
    //Disable the textbox
   var textbox = $('#mytext');
   textbox.attr("disabled","disabled");

    $('#mycheckbox').change(function(){
       //Enable input
        if(textbox.attr('disabled')){
           $('#mytext').removeAttr('disabled');
        }else {
            textbox.attr("disabled","disabled");
        }
    });

});

以下是JsFiddle上的插图：http://jsfiddle.net/X5TVx/

Answer 6

正如icktoofay所说，在标记中保持启用状态，然后使用脚本禁用它。

<input type="text" id="i0">
<label for="cb0"><input id="cb0" type="checkbox">Check to enable</label>

<script>
  document.getElementById('i0').disabled = true;
  document.getElementById('cb0').onclick = function() {
    document.getElementById('i0').disabled = !this.checked;
  };
</script>

如何在默认情况下禁用文本框并在以后启用它？

6 个答案: