根据单选和复选框显示和隐藏，启用和禁用 [英] Show and hide, enable and disable depending on radios and checkboxes
本文介绍了根据单选和复选框显示和隐藏，启用和禁用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好吧，我将我的问题改写为两个较小的模块:
Ok I am rephrasing my questions into two smaller modules:
1)当我们单击形式为名称为electronics的单选按钮时，应显示id为'electronics'的div，它最初是隐藏的.我的jQuery函数对此不正确.有指针吗?
1) When we click on the radio button with name electronics in the form, the div with id 'electronics which was originally hidden should be shown. My jquery function for this is incorrect. Any pointers ?
2)首先应禁用用于在div id电子产品中输入数量的文本框，然后在用户单击项目名称旁边的复选框时激活该文本框.例如:无线电
2) The textbox to enter quantities in the div id electronics should be initially disabled and then become active when the user clicks the checkbox next to the item name.FOr example:Radio
我的下面的代码:
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" id ="electronics" value="electronics">Electronics<br>
<input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
<input type="radio" name="household" id="both" value="both">Both<br>
</form>
<script>
$(document).ready(function(){
$(input[type="radio"]).click(function(){
$("div").show;
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
推荐答案
- 给div一个类，并从收音机中删除ID，因为ID必须是唯一的
- 将输入文本框的类型固定为type = text.
- 将点击事件添加到复选框
- 运行复选框onload的测试以禁用/启用文本字段
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
// $(this).next().prop("disabled",!this.checked); // disable if not checked
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
// $(this).prop("disabled",!$(this).prev().is(":checked"));
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="radio" name="household" value="electronics">Electronics
<br>
<input type="radio" name="household" value="cookware">Cookware
<br>
<input type="radio" name="household" value="both">Both
<br>
</form>
<div id="electronics" class="selections">
<input type="checkbox" value="radio" name="radio">Radio 2000
<input type="text" name="text1">
<br>
<input type="checkbox" value="phone" name="phone">Phone 2000
<input type="text" name="text2">
<br>
</div>
这篇关于根据单选和复选框显示和隐藏，启用和禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
