通过Javascript禁用文本字段

时间:2016-09-21 04:17:09

标签: javascript html

我有一个输入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';
}

但禁用文本字段无法正常工作。请帮帮我。

4 个答案:

答案 0 :(得分:2)

您似乎正在禁用复选框而不是文本框。更改代码:

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 = '';     
    } 

答案 1 :(得分:2)

您可以为元素设置禁用属性,例如

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

答案 2 :(得分:2)

您使用了ID&#34; check_data&#34;在下面的行中,我没有看到&#34; check_data&#34; specefied HTML中的元素。这可能是根本原因,其他代码似乎没问题。

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

答案 3 :(得分:1)

您正在引用jquery中的check_data

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

但是你还没有制作这个元素。

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

&#13;
&#13;
$(document).ready(function(){

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


});
&#13;
.disabled-control{
      opacity: 0.4; 
      cursor: not-allowed;
      pointer-events: none;
    }
&#13;
<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
&#13;
&#13;
&#13;