Question

在我的帖子之后，这是我的文本框代码，并选择使用radiobuttons启用它们。

    <!-- Student Filter List-->
    <div class="studentfilter" style="display:inline-block; border: 2px solid black; text-align: center; margin: 0 auto; width: 400px;">
        <h2>Student Filter</h2>
        <br />
        <div style="display: inline-block">
            <input type="radio" id="rad1" onclick="Radiobutton()"/>
            <input type="text" placeholder="Search ID" id="searchid" runat="server" class="form-control" style="width: 50%; display: inline-block" disabled />
        </div>
        <div style="display: inline-block">
            <input type="radio" id="rad2" onclick="Radiobutton()"/>
            <select class="form-control" runat="server" id="Year" style="width: 91%; display: inline-block" disabled>
                <option value="yearselected12" selected disabled>Filter by Year(student)</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select><br />
        </div>
        <div style="display: inline-block">
            <input type="radio" id="rad3" onclick="Radiobutton()" />
            <select class="form-control" runat="server" id="YearFrom" style="width: 49%; display: inline-block" disabled>
                <option value="yearfrom1" selected disabled>Year From</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>

            <select class="form-control" runat="server" id="YearTo" style="width: 42%; display: inline-block" disabled>
                <option value="yearto2" selected disabled>Year To</option>
                <option value="5">5</option>
                <option value="4">4</option>
                <option value="3">3</option>
                <option value="2">2</option>
                <option value="1">1</option>
            </select>
        </div><br />
        <button type="button" runat="server" onserverclick="Allstudent_Click" id="ListofStudent" class="btn btn-primary">View Student</button>
        <button type="button" runat="server" onserverclick="Clear_Click" id="clearfilter" class="btn btn-default">Clear</button>
        <br />
        <label style="visibility:hidden;">asd</label>
    </div>

这是我的radiobutton的javascript代码。

<script>
    function Radiobutton() {
        if (document.getElementById('rad1').checked == true) {
            document.getElementById("searchid").disabled = false;
        }
        else {
            document.getElementById("searchid").disabled = true;
        }

        if(document.getElementById('rad2').checked == true)
        {
            document.getElementById("Year").disabled = false;
        }
        else
        {
            document.getElementById("Year").disabled = true;
        }

        if (document.getElementById('rad3').checked == true) {
            document.getElementById("YearFrom").disabled = false;
            document.getElementById("YearTo").disabled = false;
        }
        else {
            document.getElementById("YearFrom").disabled = true;
            document.getElementById("YearTo").disabled = true;
        }
    }
</script>

当我单击其中一个单选按钮时，它们将启用所有文本框并选择。如何使我的radiobutton只启用一个单选按钮，如果我启用另一个单选按钮，则取消选中另一个单选按钮，输入标签被禁用等等？

Answer 1

你的第一个问题是：如何在html中设置radiobutton？您需要在每个上定义name属性。并确保它是相同的。

<input type="radio" name="radiobuttonlistname" id="rad1" onclick="Radiobutton()"/>
<input type="radio" name="radiobuttonlistname" id="rad2" onclick="Radiobutton()"/>
<input type="radio" name="radiobuttonlistname" id="rad3" onclick="Radiobutton()" />

回答你的第二个问题。 JavaScript是正确的，似乎对我有用。

See this fiddle

启用文本框并在javascript中使用radiobutton进行选择

1 个答案: