Question

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

我想在选中相应的复选框时清除文本框。这是我的Java脚本，

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

有什么想法吗？

Answer 1

要获取相应的文本框，您无法通过ID获取该文本框。相反，您应该获取输入父表行，然后从那里找到输入，以便它相对于复选框。

<强> 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;
    }
}

注意：

使用txt.readOnly而不是txt.disabled，因为禁用是不同的。
使用复选框onchange事件而不是onclick。

Answer 2

正如@Adil所说，如果你使用jQuery会更容易。您可以为文本框指定一个id，将复选框设置为cutstom属性，例如：

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

希望它有所帮助！

Answer 3

您好，为了禁用和启用您需要将ID分配给复选框和文本框。请看下面的代码。

<!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>

选中复选框后，应清除只读文本框

3 个答案: