Disabling text field by Javascript

Question

I have a inputing HTML page that have text field and a check box for disabling that input field.

This is the JavaScript code for disabling the text field in a .js file.value is passing the field name for check box.

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

In the imputing HTML page this is the html code and the js code.

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

In the controller,

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

But disabling the text field not working. Please help me on this.

ids cannot be duplicate. id="data" has been used twice once in text and once in hidden field. — Sasikumar
– Sasikumar, Commented Sep 21, 2016 at 4:19
you need to use readonly = true for text box disble = true for checkbox. — Samudrala Ramu
– Samudrala Ramu, Commented Sep 21, 2016 at 4:28
ye s It is a erroe. I corrected it. but not working @Sasikumar — tenten
– tenten, Commented Sep 21, 2016 at 4:31

bmceldowney · Accepted Answer · 2016-09-21 04:32:39Z

It looks like you're disabling the checkbox instead of the textbox. Change the code from:

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

to:

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

Adolphus Ald · Accepted Answer · 2016-09-21 04:34:09Z

2

you may set disabled attribute for the element, for example

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

answered Sep 21, 2016 at 4:34

Adolphus Ald

214 bronze badges

Comments

Shailesh Kopardekar · Accepted Answer · 2016-09-21 04:34:55Z

2

You have used the ID "check_data" in below line, I don't see the "check_data" element in the specefied HTML. This might be the root cause, other code seems ok.

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

answered Sep 21, 2016 at 4:34

Shailesh Kopardekar

914 bronze badges

Comments

mrid · Accepted Answer · 2016-09-21 04:37:42Z

You are referencing to check_data in your jquery

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

But you haven't made the element yet.

Also I use this to disable controls, so thought might help :)

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

Collectives™ on Stack Overflow

Disabling text field by Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related