function EnableDisableTextBox(chkPassport) {
        var txtPassportNumber = document.getElementById("txtPassportNumber");
        txtPassportNumber.disabled = chkPassport.checked ? false : true;
        if (!txtPassportNumber.disabled) {
            txtPassportNumber.focus();
        }
    }


<html>
<body>
<label for="chkPassport">
    <input type="checkbox" id="chkPassport" onclick="EnableDisableTextBox(this)" />
    Tab?
</label>Tab Quantity:
<input type="text" id="txtPassportNumber" disabled="disabled" />
<br>
<script type="text/javascript"></script>

<label for="shoes">
    <input type="checkbox" id="shoes" onclick="EnableDisableTextBox(this)" />
    Shoes?
Shoes Quantity:
<input type="text" id="txtquant" disabled="disabled" />


<br />
<label for="tshirt">
    <input type="checkbox" id="tshirt" onclick="EnableDisableTextBox(this)" />
    Tshirt?
</label>
Tshirt Quantity:
<input type="text" id="polo" disabled="disabled" />
</body>
</html>

You have not been very clear about what you want to happen, but it seems to me that because you get a reference to the text element by "txtPassportNumber" in your code, the only text box that you will ever change is the first one. The other two start off and always remain disabled.

I presume that you need to change the code so that if, for example, the second checkbox is checked then the second text field is enabled (you would need to get a reference to this text element by "txtquant") and you would disable the other text fields.

If this is not what you want to happen then please explain the problem in more detail.

This article has been dead for over six months. Start a new discussion instead.