启用/禁用使用jquery选择无线电的控制
Enable/Disable Controls on selection of Radio using jquery
我正在尝试根据无线电的选择启用/禁用某些控件。它似乎不起作用。我希望在选择"是"单选时启用禁用的文本和单选字段。请帮忙!
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>
嗨,您触发事件的方式是错误的
请尝试这个,这里是完整的代码,应该工作
注:已测试
$(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/
您可以使用jQuery-pro()方法而不是removeAttr()。试试这个-
$('#chkRelatedStudentYes').click(function () {
$('#txtRelatedStudentName').prop("disabled", false);
$('#chkPrimary').prop("disabled", false);
$('#chkSecondary').prop("disabled", false);
$('#txtStandard').prop("disabled", false);
$('#txtDivision').prop("disabled", false);
});
我发现了问题所在。脚本无法按ID或其NAME属性找到元素。我尝试了所有可能的方法在点击元素时启动脚本,并意识到当我使用-$("input[type=radio]:radio")时它是有效的同时使用类名-$(".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");
}
});
我用下面的类来处理必须禁用的文本和单选控件".form-control disable",它起作用了。我感谢阿布希的耐心和帮助
由于html元素是在服务器上呈现的,因此元素的ID将发生变化。访问javascript中的ID时,请使用以下内容:
$('#<%# chkRelatedStudentYes.ClientID%>').removeAttr("disabled");
相关文章:
- JS编译器/包管理器,用于版本控制
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 如何控制组件'的createContent函数被激发
- 节点协同与生成器和Promise并行流量控制
- 否'访问控制允许来源'标头存在于IISNOde中请求的资源(AngularJS+NodeJs)上
- 使用:new Image()控制加载html.src=html_URL
- 传单缩放控制位置错误
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 角度无线电按钮ng模型不起作用
- 使用jQuery控制来自图像的音频
- CORS:否'访问控制允许来源'header-但是php设置头文件
- "访问控制允许起源”;通过javascript从http页面调用同一网站的httpsurl时出现问题
- 为什么可以't我将检索到的文档分配给控制台中的变量
- CORS:访问控制允许原点不等于提供的原点
- 启用/禁用使用jquery选择无线电的控制
- 我应该如何根据所选的无线电输入重新组织查询的控制流
- 如何正确地控制无线电和选择值使用角
- 无线电输入控制与外部按钮