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

Last Reply 6 months ago By dharmendr

Posted 6 months 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 6 months ago.
Posted 6 months 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>