php - 如何默认禁用文本框并稍后启用它？

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

您可以使用 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 3

<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] 是第二个输入（复选框）。当复选框更改时，它调用禁用将表单作为输入传递，该函数根据其检查状态擦除或设置文本框的禁用参数。

Answer 4

正如 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>

Answer 5

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

Answer 6

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