Remove TextBox ReadOnly property based on CheckBox using JavaScript in ASP.Net

Last Reply 13 days ago By dharmendr

Posted 14 days ago

Hello Sir,

I'm trying to remove the readonly mode from textboxes based on checkboxlist selection.

<script type="text/javascript">
    function doWork4() {
        var fv48 = document.getElementById('<%=TextBox1.ClientID%>').value;
        var fv33 = document.getElementById('<%=TextBox2.ClientID%>').value;

        var checkBoxList = document.getElementById("<%=chkYesNo.ClientID%>");
        var checkBoxes = checkBoxList.getElementsByTagName("INPUT");
        var fv62 = document.getElementById('<%=TextBox3.ClientID%>').value;

        for (var i = 0; i < checkBoxes.length; i++) {
            if (checkBoxes[i].checked) {
                var value = checkBoxes[i].value;
            }
        }

        return false;

        for (var i = 0; i < checkbox1.length; i++) {
            if (checkbox1[i].checked) {
                counter1++;
            }
        }

        if (fv48.length == "") {
            swal("Validate", "Please enter first name", "error");
        }
        if (fv33.length == "") {
            swal("Validate", "Please enter last name", "error");
        }
        else if (atLeast1 > counter1) {
            swal({
                title: "Warning",
                text: "Do you have a passport",
                type: "warning"
            });
            return false;
        }
        else if (value = "Yes" && fv62.length == "") {

            swal({
                title: "Warning",
                text: "Please enter passport number",
                type: "warning"
            });
            return false;
        }
        else {
            document.getElementById("Button1").click();
        }
    }
</script>

Sir in this im trying to fill the form if checkboxlist selected is Yes, then i should remove readonly from passport number text field and without entering the number i should not be able to redirect.

If checkboxlist selected is No then passport number field should be readonly and should redirect

Please help

Thanks

You are viewing reply posted by: dharmendr 13 days ago.
Posted 13 days ago

Refer below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function doWork4() {
            var fv48 = document.getElementById('<%=TextBox1.ClientID%>').value;
            var fv33 = document.getElementById('<%=TextBox2.ClientID%>').value;
            var fv62 = document.getElementById('<%=TextBox3.ClientID%>').value;
            if (fv48.length == "") {
                alert("Please enter first name");
                return false;
            }
            if (fv33.length == "") {
                alert("Please enter last name");
                return false;
            }
            var checkBoxList = document.getElementById("<%=chkYesNo.ClientID%>");
            var checkBoxes = checkBoxList.getElementsByTagName("INPUT");
            var value;
            for (var i = 0; i < checkBoxes.length; i++) {
                if (checkBoxes[i].checked) {
                    value = checkBoxes[i].value;
                    if (value == "Yes") {
                        if (fv62.length == 0) {
                            document.getElementById('<%=TextBox3.ClientID%>').removeAttribute("readonly");
                            alert('Please enter passport number');
                            return false;
                        }
                    } else {
                        document.getElementById('<%=TextBox3.ClientID%>').setAttribute("readonly", "readonly");
                    }
                }
            }
            var atLeast1 = 0;
            var counter1 = 0;
            for (var i = 0; i < checkBoxes.length; i++) {
                if (checkBoxes[i].checked) {
                    counter1++;
                }
            }

            if (atLeast1 < counter1) {
                if (fv62.length > 0 || value == "No") {
                    //document.getElementById("Button1").click();
                    __doPostBack('Button1', 'OnClick');
                }
            } else {
                alert('Do you have a passport');
                return false;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <label>
            First name</label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <label>
            Last name</label>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
        <asp:CheckBoxList runat="server" ID="chkYesNo">
            <asp:ListItem Text="Yes" Value="Yes" />
            <asp:ListItem Text="No" Value="No" />
        </asp:CheckBoxList>
        <label>
            Passport No</label>
        <asp:TextBox ID="TextBox3" runat="server" ReadOnly="true"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="doWork4();return false;" />
    </div>
    </form>
</body>
</html>