【问题标题】:How to Disable input text on form?如何禁用表单上的输入文本?
【发布时间】:2016-05-23 18:19:40
【问题描述】:

我想禁用和启用输入文本如果操作添加输入文本启用如果操作编辑输入文本禁用

谢谢

【问题讨论】:

  • 我们可以看看一些代码吗?
  • 我还没有编码...我不明白如何在添加和编辑操作时启用和禁用输入文本
  • 什么是“动作”?
  • 例如条件:if value == null {enable} 或 if value == not null {disable}
  • value 是 javscript 还是 php 变量?

标签: javascript php html ajax codeigniter


【解决方案1】:

您可以使用 jQuery 函数 prop() 来实现这一点:

JavaScript

var value = $('input').val();

if (value == null) {
   $("input").prop('disabled', false);
} else {
   $("input").prop('disabled', true);
}

这是一个演示:JsFiddle

【讨论】:

  • value = 输入文本中的内容
  • so value = $('input').val();
  • 好的,你想什么时候禁用输入?
  • 输入文本中的内容为空=禁用
  • jsfiddle.net/atg5m6ym/5036 ,当输入为空时,输入=禁用,你想要什么?
【解决方案2】:

由于您没有提供任何 sn-p,我尝试使用以下代码复制它。

HTML

<input type = "text" id ="demoI">
<input type = "button" value = "Add" id = "_add">
<input type = "button" value = "Edit" id = "_edit">

JS

window.onload=function(){
var _getInput=document.getElementById("demoI");
var _getAdd = document.getElementById("_add");
var _getEdit = document.getElementById("_edit");
_getAdd.addEventListener('click',function(event){
_getInput.disabled = true;
})
_getEdit.addEventListener('click',function(event){
_getInput.disabled = false;
})

}

查看jsFiddle

【讨论】:

  • 感谢您的回答,但在我的项目中,我需要在表单添加和表单编辑中启用和禁用输入文本
【解决方案3】:

您可以在自己的视图中执行此操作。

if( $this->uri->segment(3) == 'add' ) {
   <input type="text" name="myfield" disabled />
} else {
  <input type="text" name="myfield" />
}

【讨论】:

    【解决方案4】:

    试试这个代码: 你可以只用 java 脚本来做,不需要使用 jQuery

    window.onload = function(){
      
       var fname = document.getElementById("fname").value;
       if(fname == '')
       {
           document.getElementById("fname").disabled = false;
       }
       else 
       {
           document.getElementById("fname").disabled = true;
       }
    }
    First Name: &lt;input type="text" name="fname" id="fname" &gt;

    【讨论】:

    • CHECK THIS FIIDDLE ALSO 用于编辑和禁用输入
    • 试试这段代码,不需要使用jquery来获取值和禁用输入,这只是通过java脚本完成的..
    猜你喜欢
    • 2013-04-02
    • 2014-10-19
    • 2020-04-30
    • 2013-05-03
    • 2014-09-02
    • 2011-02-21
    • 1970-01-01
    • 2022-11-12
    • 2019-04-01
    相关资源
    最近更新 更多