tenten tenten - 2 months ago 5
Javascript Question

Disabling text field by Javascript

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.

Answer

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