使用JQuery启用输入字段的单选框

Radio box enabling input fields with JQuery

本文关键字：单选框 字段 输入 JQuery 启用 使用      更新时间：2023-09-26

我试图根据单选按钮中选择的选项启用文本字段。我对任何javascript或jquery都很陌生，所以我真的需要一些帮助。

这是放置单选按钮和输入字段的表格中的TR

<tr>
    <td><b>Yes or no?</b></td>
    <td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
    <td></td>
    <td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
    <td>
        <input type="text" name="disabledtextfield" id="test" disabled />
        <script type="text/javascript">
            $('#no').click(function () {
                $('#test').removeAttr("disabled");
            });
            $('#yes').click(function () {
                $('#test').attr("disabled", "disabled");
            });
        </script>
    </td>
</tr>

这个问题可能真的很琐碎，但再说一遍，我根本没有处理过这个问题。任何帮助都将不胜感激！

您可以使用change事件而不是click来执行如下操作。

$(':radio[name=choose]').change(function () {
    var isChecked = $('#yes').is(':checked');
    $('#test').prop("disabled", !isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><b>Yes or no?</b></td>
        <td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
    </tr>
    <tr>
        <td></td>
        <td><input id="no" type="radio" name="choose" value="no" checked> No</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="disabledtextfield" id="test" disabled />
        </td>
    </tr>
</table>

将代码包装在文档就绪功能中

  <script type="text/javascript">
        $(function(){
                    $('#no').click(function()
                            {
                              $('#test').removeAttr("disabled");
                            });
                    $('#yes').click(function()
                            {
                              $('#test').attr("disabled","disabled");
                            });
        })
                    </script>


$('#no').click(function()
                    {
                      $('#test').removeAttr("disabled");
                    });
            $('#yes').click(function()
                    {
                      $('#test').attr("disabled","disabled");
                    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><b>Yes or no?</b></td>
        <td><input id="yes" type="radio" name="choose" value="yes" checked> Yes</td>
    </tr>
    <tr>
        <td></td>
        <td><input id="no" type="radio" name="choose" value="no" > No</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="disabledtextfield" id="test" disabled />
        </td>
    </tr>
</table>

相关文章：