Enable/Disable 使用 jquery 控制收音机选择

Question

我正在尝试 Enable/Disable 某些控件，具体取决于 Radio 的选择。它似乎没有用。我希望在选择是单选时启用禁用的文本和单选字段。请帮忙！

ASP 片段

                <div class="form-group" >
                    <label class="control-label">Whether any other children of the same family is studying in Primary/ Secondary Section of SVVHS</label><br />
                    <input type="radio" value="yes" id="chkRelatedStudentYes" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">Yes</label><br />
                    <input type="radio" value="no" id="chkRelatedStudentNo" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">No</label>
                 </div>
                <div class="form-group">
                    <label class="control-label">Name of the Student</label>
                    <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name of the Related Student" id="txtRelatedStudentName" runat="server" disabled="disabled" />
                </div>
                <div class="form-group">
                    <label class="control-label">Section</label><br />
                    <input type="radio" value="Primary" id="chkPrimary" runat="server" name="Section"  required="required" disabled="disabled"/> <label class="control-label">Primary</label><br />
                    <input type="radio" value="Secondary" id="chkSecondary" runat="server" name="Section"  required="required" disabled="disabled"/> <label class="control-label">Secondary</label>
                </div>
                <div class="form-group">
                    <label class="control-label">Standard</label>
                    <input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Standard of the Related Student" id="txtStandard" runat="server" disabled="disabled"/>
                </div>
                <div class="form-group">
                    <label class="control-label">Division</label>
                    <input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Division of the Related Student" id="txtDivision" runat="server" disabled="disabled"/>
                </div>

jquery 片段

        <script type="text/javascript">
            $('#chkRelatedStudentYes').click(function () {
                $('#txtRelatedStudentName').removeAttr("disabled");
                $('#chkPrimary').removeAttr("disabled");
                $('#chkSecondary').removeAttr("disabled");
                $('#txtStandard').removeAttr("disabled");
                $('#txtDivision').removeAttr("disabled");
            });
            $('#chkRelatedStudentNo').click(function () {
                $('#txtRelatedStudentName').attr("disabled", "disabled");
                $('#chkPrimary').attr("disabled", "disabled");
                $('#chkSecondary').attr("disabled", "disabled");
                $('#txtStandard').attr("disabled", "disabled");
                $('#txtDivision').attr("disabled", "disabled");
            });
</script>

Answer 1

您可以使用 jQuery prop() 方法代替 removeAttr()。试试这个 -

$('#chkRelatedStudentYes').click(function () {
   $('#txtRelatedStudentName').prop("disabled", false);
   $('#chkPrimary').prop("disabled", false);
   $('#chkSecondary').prop("disabled", false);
   $('#txtStandard').prop("disabled", false);
   $('#txtDivision').prop("disabled", false);
});

Answer 2

您好，您触发事件的方式有误

请试试这个，这是应该可以工作的完整代码

注意：已测试

 $(document).ready(function() {
        $("input[name=RelatedStudent]:radio").click(function() { // attack a click event on all radio buttons with name 'radiogroup'


                if($(this).val() == 'yes') {//check which radio button is clicked 
                        $('#txtRelatedStudentName').removeAttr("disabled");
                $('#chkPrimary').removeAttr("disabled");
                $('#chkSecondary').removeAttr("disabled");
                $('#txtStandard').removeAttr("disabled");
                $('#txtDivision').removeAttr("disabled");
                } else if($(this).val() == 'no') {
                      $('#txtRelatedStudentName').attr("disabled", "disabled");
                $('#chkPrimary').attr("disabled", "disabled");
                $('#chkSecondary').attr("disabled", "disabled");
                $('#txtStandard').attr("disabled", "disabled");
                $('#txtDivision').attr("disabled", "disabled");
                } 
        });
});

你可以在这里试试https://jsfiddle.net/abhiyx/fgen1br9/

Answer 3

我找到问题所在了。脚本无法通过 ID 或其 NAME 属性找到元素。我尝试了所有可能的方法来在单击元素时触发脚本，并意识到当我使用时它正在工作 - $("input[type=radio]:radio") 并且还使用 class 名称 - $(".form-control") 我修改了脚本并使用了下面的脚本并成功运行

$("input[type=radio]:radio").click(function () {
    if ($(this).val() == 'yes') {
        $(".form-control-disable").removeAttr("disabled");
            }
    else if ($(this).val() == 'no') {
        $(".form-control-disable").attr("disabled", "disabled");       
            }
});

我将以下 class 用于必须禁用的文本和无线电控件“.form-control-disable”并且它起作用了。我感谢 Abhi 的耐心和帮助。 :)

Answer 4

由于 html 元素是在服务器上呈现的，因此元素的 ID 会发生变化。在访问javascript中的ID时，请按如下方式使用：

$('#<%# chkRelatedStudentYes.ClientID%>').removeAttr("disabled");

Enable/Disable 使用 jquery 控制收音机选择

Enable/Disable Controls on selection of Radio using jquery

javascript

asp.net

jquery

visibility

disabled-control