根据无线电和复选框显示和隐藏，启用和禁用

好吧，我将我的问题改为两个较小的模块：

1）当我们点击表格中名称为electronics的单选按钮时，应显示最初隐藏了ID为“电子设备”的div。 我的jquery函数不正确。 有什么指针吗？

2）最初应禁用在div id electronics中输入数量的文本框，然后在用户单击项目名称旁边的复选框时激活该文本框。例如：Radio

我的代码如下：

    div{display:none}    
 Electronics
 Cookware
 Both
 
  $(document).ready(function(){ $(input[type="radio"]).click(function(){ $("div").show; }); });  
 Radio   2000  
 Phone  2000  
 
   

Answer 1

1. 给div一个类并从无线电中删除ID，因为ID必须是唯一的
2. 将输入文本框的类型修改为type = text。
3. 将click事件添加到复选框
4. 运行复选框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 } 

  
 Electronics 
 Cookware 
 Both 
 
 
 Radio   2000    
 Phone  2000    
  

Answer 2

选择器错了

  $(document).ready(function(){ $('input[type="radio"]').click(function(){ $("div").show(); }); }); 

要么

  $(document).ready(function(){ $(":radio").click(function(){ $("div").show(); }); }); 

Answer 3

看起来你选择器是错误的并且显示函数应该是.show() 。 把这个js代码放在脚本部分。

问题1和2的答案

 $(document).ready(function(){ /* question 1 */ $('input[type="radio"]').click(function(){ $("div").show(); }); /* question 2 */ $('input[type="checkbox"]').on('click',function(){ if($(this).is(':checked')) { $(this).next().removeAttr('disabled'); } else { $(this).next().attr('disabled','disabled'); } }) }); 

这是标记。 我改变了一点（在初始启动时隐藏div和禁用输入文本 。

  
 Electronics
 Cookware
 Both
 
 
 Radio   2000  
 Phone  2000   
 
  

Answer 4

您应该使用单选按钮上的类，以防您在页面中添加更多单选按钮…

 Electronics
 Cookware
 Both
 

还有复选框……

 
 Radio   2000   
 Phone  2000   
  

然后在页面加载后立即禁用复选框并创建单击function：

 $(document).ready(function(){ // disable all text inputs $(".textbox").prop("disabled", true); $(".myradio").click(function(){ //get value from this radio and show respective div $("#"+$(this).val()).show(); //enable text input from #text_(value) $("#text_"+$(this).val()).prop("disabled", false); }); });