CODEWITHSUNDEEP
javascripthtmlasp.net-mvc
dilipkumar1007
dilipkumar1007

Reputation: 363

A readonly textbox should be cleared on checkbox checked

<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" class="textbox" value="Not Required" readonly=readonly />
        </td>
        <td>
            <input type="checkbox"  onclick="CheckCheckboxes1(this)"/>
        </td>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" class="textbox" value="Not Required" readonly/>
        </td>
        <td>
            <input type="checkbox"  onclick="CheckCheckboxes1(this)" />
        </td>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" class="textbox" value="Not Required" readonly/>
        </td>
        <td>
            <input type="checkbox"  onclick="CheckCheckboxes1(this)" />
        </td>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" class="textbox" value="Not Required" readonly/>
        </td>
        <td>
            <input type="checkbox"  onclick="myFunction(this)" />
        </td>
    </tr>
</table>

I want to clear textbox when we corresponding checkboc is checked. Here is my Java script,

<script type="text/javascript" language="javascript">

function CheckCheckboxes1(chk){

    if(chk.checked == true)
    {
        var txt = document.getElementById('TextBox1');
        txt.value = "";
        txt.disabled = false;
    }
    else
    {
        var txt = document.getElementById('TextBox1');
        txt.value = "Enter Username";
        txt.disabled = true;
    }
}
</script>

Any idea?

Upvotes: 0

Views: 3612

Answers (3)

Alex Char
Alex Char

Reputation: 33218

As @Adil said it is easier if you use jQuery. You can give your textbox an id and your checkbox a cutstom attribute e.g.:

<td>
 <input type="text" id="txt_1" class="textbox" value="Not Required" readonly=readonly />
</td>
        <td>
            <input type="checkbox" specId="1"  onclick="CheckCheckboxes1(this)"/>
        </td>

function CheckCheckboxes1(chk){
      var specId = $(chk).attr("specId");
      var txt = $("#txt_"+specId);

        if(chk.checked == true)
        {                
            $(txt).val("");
            $(txt).attr("disabled","disabled");
        }
        else
        {               
            $(txt).val("Enter Username");
            $(txt).removeAttr("disabled");
        }
    }

Hope it helps!

Upvotes: 1

Dj.
Dj.

Reputation: 11

Hi in order to disable and enable you need to assign the id's to both checkbox and textboxs. please look at the below code. 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">

function CheckCheckboxes1(chk){

    if(chk.checked == true)
    {
        var txt = document.getElementById('TextBox'+chk.id);
        txt.value = "";
        txt.disabled = false;
    }
    else
    {
        var txt = document.getElementById('TextBox'+chk.id);
        txt.value = "Enter Username";
        txt.disabled = true;
    }
}
</script>
</head>
<body>
<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" id= "TextBox1" class="textbox" value="Not Required" readonly=readonly />
        </td>
        <td>
            <input type="checkbox" id="1" onclick="CheckCheckboxes1(this)"/>
        </td>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" id= "TextBox2" class="textbox" value="Not Required" readonly/>
        </td>
        <td>
            <input type="checkbox" id="2" onclick="CheckCheckboxes1(this)" />
        </td>
    </tr>
    <tr>`enter code here`
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" id= "TextBox3" class="textbox" value="Not Required" readonly/>
        </td>
        <td>
            <input type="checkbox" id="3"  onclick="CheckCheckboxes1(this)" />
        </td>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="text" id= "TextBox4" class="textbox" value="Not Required" readonly/>
        </td>
        <td>
            <input type="checkbox" id="4" onclick="myFunction(this)" />
        </td>
    </tr>
</table>



</body>
</html>

Upvotes: 1

MrCode
MrCode

Reputation: 64526

In order to get the corresponding textbox, you can't get it by ID. Instead you should get the inputs parent table row and then find the input from there, so that it is relative to the checkbox.

Working demo

function CheckCheckboxes1(chk){
    var txt = chk.parentNode.parentNode.cells[2].getElementsByTagName('input')[0];

    if(chk.checked == true)
    {
        txt.value = "";
        txt.readOnly = false;
    }
    else
    {
        txt.value = "Enter Username";
        txt.readOnly = true;
    }
}

Notes:

  • Use txt.readOnly not txt.disabled because disabled is something different.
  • Use the checkbox onchange event not onclick.

Upvotes: 2

Related Questions