如何在默认情况下禁用文本框,然后再启用它


How to I disable the textbox by default and enable it later?

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

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

使用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);
    }
    });
});

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

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

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

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

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