通过 Javascript 禁用文本字段答案

【问题标题】：Disabling text field by Javascript通过 Javascript 禁用文本字段
【发布时间】：2016-09-21 12:37:42
【问题描述】：

我有一个输入 HTML 页面，其中包含文本字段和一个用于禁用该输入字段的复选框。

这是用于禁用 .js 文件中的文本字段的 JavaScript 代码。value 正在传递复选框的字段名称。

   function disable_input_field(value){     
        if ($("#undefined_" + value).is(":checked")) {       
            document.getElementById("undefined_" + value).disabled = true;       
            document.getElementById(value).value = '??';     
        }else{      
            $("#" + value ).prop("disabled", false);        
            document.getElementById(value).value = '';     
        } 
    }

在输入的 HTML 页面中，这是 html 代码和 js 代码。

<tr>
                <td >data</td>
                    <td colspan="3">
                       <input type="text" id="data_value" name="data_vale" size="50"value='<?php echo $data?>'>
                </td>
                <td colspan = "3">
                <?php 
                    if($check_data != ''){?>
                        <input type="checkbox" checked name="undefined_data" id="undefined_data" onclick="disable_input_field('data')" >disable
                <?php }else{?>
                        <input type="checkbox" name="undefined_data" id="undefined_data" onclick="disable_input_field('data')" >disable
                <?php }?>
                <input type="hidden" name="data" id="data">
                </td>
            </tr>
            <tr>

.................................................. ....................................

$(document).ready(function() {
    if(document.getElementById('check_data').value == 'data'){
       disable_input_field('data');
    }
 }

在控制器中，

if ($this->input->post('data') == 'disabled') {
    $data['check_data'] = 'data';
}

但禁用文本字段不起作用。请帮我解决这个问题。

【问题讨论】：

ID 不能重复。 id="data" 已在文本中使用过两次，在隐藏字段中使用过一次。
How to disable an input type=text?的可能重复
无法重现此问题..fiddle
文本框需要使用 readonly = true 复选框。
是的，这是一个错误。我纠正了它。但不工作@Sasikumar

标签： javascript html

【解决方案1】：

看起来您正在禁用复选框而不是文本框。更改代码：

function disable_input_field(value){     
    if ($("#undefined_" + value).is(":checked")) {       
        document.getElementById("undefined_" + value).disabled = true;       
        document.getElementById(value).value = '??';     
    }else{      
        $("#" + value ).prop("disabled", false);        
        document.getElementById(value).value = '';     
    }

到：

function disable_input_field(value){     
    if ($("#undefined_" + value).is(":checked")) {       
        document.getElementById("#" + value + "_value").disabled = true;       
        document.getElementById(value).value = '??';     
    }else{      
        $("#" + value + "_value" ).prop("disabled", false);        
        document.getElementById(value).value = '';     
    }

【讨论】：

【解决方案2】：

你可以为元素设置disabled属性，例如

document.getElementById('data_value').setAttribute('disabled ', 'disabled');

【讨论】：

【解决方案3】：

您在下面的行中使用了 ID“check_data”，我在指定的 HTML 中没有看到“check_data”元素。这可能是根本原因，其他代码似乎没问题。

if(document.getElementById('check_data').value == 'data'){

【讨论】：

【解决方案4】：

您在 jquery 中引用了check_data

$(document).ready(function() {
    if(document.getElementById('check_data').value == 'data'){
       disable_input_field('data');
    }
}

但是你还没有制作元素。

我也用它来禁用控件，所以想想可能会有所帮助:)

$(document).ready(function(){

$(document).on('change', '#check1', function(e){
  if($(this).is(':checked')){
      $('#input1').addClass('disabled-control');
  }
  else
  {
      $('#input1').removeClass('disabled-control');
  }
});


});

.disabled-control{
      opacity: 0.4; 
      cursor: not-allowed;
      pointer-events: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="input1">
<input type="checkbox" id="check1">Disable

【讨论】：