最小化JQuery脚本

Question

我正在做一些调查页面。当调查员回答问题时，我需要用一些选项和限制来控制屏幕。因为我目前使用jQuery，它是非常手动的作业和代码看起来很愚蠢，因为有太多重复的函数等等。所以你可以给我一些关于如何最小化我写的jquery脚本的建议。

初级讲座是脚本

$(document).ready(function() { 


// Block text input at the very first 
$("#q1_1_etc, #q1_2_etc, #q1_3_etc, #q1_4_etc,#q1_5_etc, #q1_6_etc, #q2_1_etc, #q2_2_etc, #q2_3_etc, #q3_1_etc, #q3_2_etc, #q3_3_etc, #q4_1_etc, #q4_2_etc, #q4_3_etc, #q4_4_etc, #q5_1_etc ,#q5_5_etc").attr("disabled","disabled"); 

//Block/Unblock input type on checkbox 
$("#q1_1_5").change(function(){ 
    if($(this).is(":checked")==true){ 
     $("#q1_1_etc").removeAttr("disabled"); 
    }else{ 
     $("#q1_1_etc").val(" "); 
     $("#q1_1_etc").attr("disabled","disabled"); 
    } 

}); 

    $("#q1_4_4").change(function(){ 
    if($(this).is(":checked")==true){ 
     $("#q1_4_etc").removeAttr("disabled"); 
    }else{ 
     $("#q1_4_etc").val(" "); 
     $("#q1_4_etc").attr("disabled","disabled"); 
    } 

}); 

//Block/Unblock input type on radio 
$("input[name='q1_2']").change(function(){ 
    if($("#q1_2_3").is(":checked")==true){ 
     $("#q1_2_etc").removeAttr("disabled"); 
    }else{ 
     $("#q1_2_etc").val(" "); 
     $("#q1_2_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q1_3']").change(function(){ 
    if($("#q1_3_3").is(":checked")==true){ 
     $("#q1_3_etc").removeAttr("disabled"); 
    }else{ 
     $("#q1_3_etc").val(" "); 
     $("#q1_3_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q1_5']").change(function(){ 
    if($("#q1_5_3").is(":checked")==true){ 
     $("#q1_5_etc").removeAttr("disabled"); 
    }else{ 
     $("#q1_5_etc").val(" "); 
     $("#q1_5_etc").attr("disabled","disabled"); 
    } 

}); 

    $("input[name='q1_6']").change(function(){ 
    if($("#q1_6_3").is(":checked")==true){ 
     $("#q1_6_etc").removeAttr("disabled"); 
    }else{ 
     $("#q1_6_etc").val(" "); 
     $("#q1_6_etc").attr("disabled","disabled"); 
    } 

}); 

    $("input[name='q2_1']").change(function(){ 
    if($("#q2_1_3").is(":checked")==true){ 
     $("#q2_1_etc").removeAttr("disabled"); 
    }else{ 
     $("#q2_1_etc").val(" "); 
     $("#q2_1_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q2_2']").change(function(){ 
    if($("#q2_2_3").is(":checked")==true){ 
     $("#q2_2_etc").removeAttr("disabled"); 
    }else{ 
     $("#q2_2_etc").val(" "); 
     $("#q2_2_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q2_3']").change(function(){ 
    if($("#q2_3_3").is(":checked")==true){ 
     $("#q2_3_etc").removeAttr("disabled"); 
    }else{ 
     $("#q2_3_etc").val(" "); 
     $("#q2_3_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q3_1']").change(function(){ 
    if($("#q3_1_3").is(":checked")==true){ 
     $("#q3_1_etc").removeAttr("disabled"); 
    }else{ 
     $("#q3_1_etc").val(" "); 
     $("#q3_1_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q3_2']").change(function(){ 
    if($("#q3_2_3").is(":checked")==true){ 
     $("#q3_2_etc").removeAttr("disabled"); 
    }else{ 
     $("#q3_2_etc").val(" "); 
     $("#q3_2_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q3_3']").change(function(){ 
    if($("#q3_3_4").is(":checked")==true){ 
     $("#q3_3_etc").removeAttr("disabled"); 
    }else{ 
     $("#q3_3_etc").val(" "); 
     $("#q3_3_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q4_1']").change(function(){ 
    if($("#q4_1_3").is(":checked")==true){ 
     $("#q4_1_etc").removeAttr("disabled"); 
    }else{ 
     $("#q4_1_etc").val(" "); 
     $("#q4_1_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q4_2']").change(function(){ 
    if($("#q4_2_3").is(":checked")==true){ 
     $("#q4_2_etc").removeAttr("disabled"); 
    }else{ 
     $("#q4_2_etc").val(" "); 
     $("#q4_2_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q4_3']").change(function(){ 
    if($("#q4_3_3").is(":checked")==true){ 
     $("#q4_3_etc").removeAttr("disabled"); 
    }else{ 
     $("#q4_3_etc").val(" "); 
     $("#q4_3_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q4_4']").change(function(){ 
    if($("#q4_4_3").is(":checked")==true){ 
     $("#q4_4_etc").removeAttr("disabled"); 
    }else{ 
     $("#q4_4_etc").val(" "); 
     $("#q4_4_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q5_1']").change(function(){ 
    if($("#q5_1_7").is(":checked")==true){ 
     $("#q5_1_etc").removeAttr("disabled"); 
    }else{ 
     $("#q5_1_etc").val(" "); 
     $("#q5_1_etc").attr("disabled","disabled"); 
    } 

}); 

$("input[name='q5_5']").change(function(){ 
    if($("#q5_5_11").is(":checked")==true){ 
     $("#q5_5_etc").removeAttr("disabled"); 
    }else{ 
     $("#q5_5_etc").val(" "); 
     $("#q5_5_etc").attr("disabled","disabled"); 
    } 

}); 



}); 

功能的onsubmit（）{

var aq1_1=$("input[name^='q1_1']:checked").val(); 
if(aq1_1 == undefined){ 
    alert("1-1 Please, Answer the question!"); 
    $("#viewpoint1_1").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q1_1_5").is(":checked"); 
var isEtcEmpty=$("#q1_1_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("1-1 Please, Answer the question!."); 
    $("#q1_1_etc").focus(); 
    return; 
} 


var aq1_2=$("input[name^='q1_2']:checked").val(); 
if(aq1_2 == undefined){ 
    alert("1-2 Please, Answer the question!"); 
    $("#viewpoint1_2").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q1_2_3").is(":checked"); 
var isEtcEmpty=$("#q1_2_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("1-2 Please, Answer the question!."); 
    $("#q1_2_etc").focus(); 
    return; 
} 

var aq1_3=$("input[name^='q1_3']:checked").val(); 
if(aq1_3 == undefined){ 
    alert("1-3 Please, Answer the question!"); 
    $("#viewpoint1_3").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q1_3_3").is(":checked"); 
var isEtcEmpty=$("#q1_3_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("1-3 Please, Answer the question!."); 
    $("#q1_3_etc").focus(); 
    return; 
} 

var aq1_4=$("input[name^='q1_4']:checked").val(); 
if(aq1_4 == undefined){ 
    alert("1-4 Please, Answer the question!"); 
    $("#viewpoint1_4").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q1_4_4").is(":checked"); 
var isEtcEmpty=$("#q1_4_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("1-4 Please, Answer the question!."); 
    $("#q1_4_etc").focus(); 
    return; 
} 

var aq1_5=$("input[name^='q1_5']:checked").val(); 
if(aq1_5 == undefined){ 
    alert("1-5 Please, Answer the question!"); 
    $("#viewpoint1_5").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q1_5_3").is(":checked"); 
var isEtcEmpty=$("#q1_5_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("1-5 Please, Answer the question!."); 
    $("#q1_5_etc").focus(); 
    return; 
} 

var aq1_6=$("input[name^='q1_6']:checked").val(); 
if(aq1_6 == undefined){ 
    alert("1-6 Please, Answer the question!"); 
    $("#viewpoint1_6").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q1_6_3").is(":checked"); 
var isEtcEmpty=$("#q1_6_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("1-6 Please, Answer the question!."); 
    $("#q1_6_etc").focus(); 
    return; 
} 

var aq2_1=$("input[name^='q2_1']:checked").val(); 
if(aq2_1 == undefined){ 
    alert("2-1 Please, Answer the question!"); 
    $("#viewpoint2_1").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q2_1_3").is(":checked"); 
var isEtcEmpty=$("#q2_1_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("2-1 Please, Answer the question!."); 
    $("#q2_1_etc").focus(); 
    return; 
} 

var aq2_2=$("input[name^='q2_2']:checked").val(); 
if(aq2_2 == undefined){- 
    alert("2-2 Please, Answer the question!"); 
    $("#viewpoint2_2").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q2_2_3").is(":checked"); 
var isEtcEmpty=$("#q2_2_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("2-2 Please, Answer the question!."); 
    $("#q2_2_etc").focus(); 
    return; 
} 


var aq2_3=$("input[name^='q2_3']:checked").val(); 
if(aq2_3 == undefined){ 
    alert("2-3 Please, Answer the question!"); 
    $("#viewpoint2_3").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q2_3_3").is(":checked"); 
var isEtcEmpty=$("#q2_3_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("2-3 Please, Answer the question!."); 
    $("#q2_3_etc").focus(); 
    return; 
} 


var aq3_1=$("input[name^='q3_1']:checked").val(); 
if(aq3_1 == undefined){ 
    alert("3-1 Please, Answer the question!"); 
    $("#viewpoint3_1").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q3_1_3").is(":checked"); 
var isEtcEmpty=$("#q3_1_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("3-1 Please, Answer the question!."); 
    $("#q3_1_etc").focus(); 
    return; 
} 


var aq3_2=$("input[name^='q3_2']:checked").val(); 
if(aq3_2 == undefined){ 
    alert("3-2 Please, Answer the question!"); 
    $("#viewpoint3_2").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q3_2_3").is(":checked"); 
var isEtcEmpty=$("#q3_2_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("3-2 Please, Answer the question!."); 
    $("#q3_2_etc").focus(); 
    return; 
} 

var aq3_3=$("input[name^='q3_3']:checked").val(); 
if(aq3_3 == undefined){ 
    alert("3-3 Please, Answer the question!"); 
    $("#viewpoint3_3").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q3_3_3").is(":checked"); 
var isEtcEmpty=$("#q3_3_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("3-3 Please, Answer the question!."); 
    $("#q3_3_etc").focus(); 
    return; 
} 

var aq4_1=$("input[name^='q4_1']:checked").val(); 
if(aq4_1 == undefined){ 
    alert("4-1 Please, Answer the question!"); 
    $("#viewpoint4_1").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q4_1_3").is(":checked"); 
var isEtcEmpty=$("#q4_1_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("4-1 Please, Answer the question!."); 
    $("#q4_1_etc").focus(); 
    return; 
} 

var aq4_2=$("input[name^='q4_2']:checked").val(); 
if(aq4_2 == undefined){ 
    alert("4-2 Please, Answer the question!"); 
    $("#viewpoint4_2").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q4_2_3").is(":checked"); 
var isEtcEmpty=$("#q4_2_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("4-2 Please, Answer the question!."); 
    $("#q4_2_etc").focus(); 
    return; 
} 

var aq4_3=$("input[name^='q4_3']:checked").val(); 
if(aq4_3 == undefined){ 
    alert("4-3 Please, Answer the question!"); 
    $("#viewpoint4_3").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q4_3_3").is(":checked"); 
var isEtcEmpty=$("#q4_3_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("4-3 Please, Answer the question!."); 
    $("#q4_3_etc").focus(); 
    return; 
} 

var aq4_4=$("input[name^='q4_4']:checked").val(); 
if(aq4_4 == undefined){ 
    alert("4-4 Please, Answer the question!"); 
    $("#viewpoint4_4").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q4_4_3").is(":checked"); 
var isEtcEmpty=$("#q4_4_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("4-4 Please, Answer the question!."); 
    $("#q4_4_etc").focus(); 
    return; 
} 



var aq5_1=$("input[name^='q5_1']:checked").val(); 
if(aq5_1 == undefined){ 
    alert("5-1 Please, Answer the question!"); 
    $("#viewpoint5_1").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q5_1_7").is(":checked"); 
var isEtcEmpty=$("#q5_1_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("5-1 Please, Answer the question!."); 
    $("#q5_1_etc").focus(); 
    return; 
} 

var aq5_2=$("input[name^='q5_2']:checked").val(); 
if(aq5_2 == undefined){ 
    alert("5-2 Please, Answer the question!"); 
    $("#viewpoint5_2").get(0).scrollIntoView(true); 
    return; 
} 

var aq5_3=$("input[name^='q5_3']:checked").val(); 
if(aq5_3 == undefined){ 
    alert("5-3 Please, Answer the question!"); 
    $("#viewpoint5_3").get(0).scrollIntoView(true); 
    return; 
} 

var aq5_4=$("input[name^='q5_4']:checked").val(); 
if(aq5_4 == undefined){ 
    alert("5-4 Please, Answer the question!"); 
    $("#viewpoint5_4").get(0).scrollIntoView(true); 
    return; 
} 

var aq5_5=$("input[name^='q5_5']:checked").val(); 
if(aq5_5 == undefined){ 
    alert("5-5 Please, Answer the question!"); 
    $("#viewpoint5_5").get(0).scrollIntoView(true); 
    return; 
} 

var isEtcChecked=$("#q5_5_11").is(":checked"); 
var isEtcEmpty=$("#q5_5_etc").val().length; 
if(isEtcChecked== true && isEtcEmpty ==0){ 
    alert("5-5 Please, Answer the question!.");2014-04-23 
    $("#q5_5_etc").focus(); 
    return; 
} 


if($("#companyName").val().length ==0){ 
    alert("Please Answer the Question"); 
    return; 
} 

if($("#writer").val().length ==0){ 
    alert("Please Answer the Question"); 
    return; 
} 

if($("#phoneFax").val().length ==0){ 
    alert("Please Answer the Question"); 
    return; 
} 

if($("#contactemail").val().length ==0){ 
    alert("Please Answer the Question"); 
    return; 
} 

if($("#location").val().length ==0){ 
    alert("Please Answer the Question"); 
    return; 
} 


form.action = "customs_save.jsp"; 
form.submit(); 

}

，你可以看到有重复的堆。如果我再说一次，我想改变它的方式更有效率。

，如果你知道这件事情，请告诉我你的经验，并给予意见，这将是对我有帮助。

谢谢。

Answer 1

1. 更换

   $("#q1_1_etc, #q1_2_etc, #q1_3_etc, #q1_4_etc,#q1_5_etc, #q1_6_etc, #q2_1_etc, #q2_2_etc, #q2_3_etc, #q3_1_etc, #q3_2_etc, #q3_3_etc, #q4_1_etc, #q4_2_etc, #q4_3_etc, #q4_4_etc, #q5_1_etc ,#q5_5_etc").attr("disabled","disabled"); 
   

通过

// If you want to disabled all input fields 
$(":input").attr("disabled", "disabled"); 

// If you want to disable only a subset. Add them to a container like a div 
$("#myInputContainer :input").attr("disabled", "disabled"); 

1. 使用通用事件处理程序的输入字段替换像这样的事情：

   $("#q1_1_5").change(function(){ 
       if($(this).is(":checked")==true){ 
        $("#q1_1_etc").removeAttr("disabled"); 
       }else{ 
        $("#q1_1_etc").val(" "); 
        $("#q1_1_etc").attr("disabled","disabled"); 
       } 
   }); 
   
   
   $("#q1_4_4").change(function(){ 
       if($(this).is(":checked")==true){ 
       $("#q1_4_etc").removeAttr("disabled"); 
       }else{ 
       $("#q1_4_etc").val(" "); 
       $("#q1_4_etc").attr("disabled","disabled"); 
       } 
   
   }); 
   

通过

$("input").change(function(){ 
    var relatedElementId = "#" + $(this).attr("id") + "_etc"; 
    if($(this).is(":checked")==true){ 
     $(relatedElementId).removeAttr("disabled"); 
    }else{ 
     $(relatedElementId).val(" "); 
     $(relatedElementId).attr("disabled","disabled"); 
    } 

}); 

主要的想法是使用jQuery选择和组织您的DOM struture使通用代码容易编写。 。

Answer 2

使用索引 - >当量（ⅰ）

在使用输入共类

$（文件）。就绪（函数（）{

$('.common_class_input').each(function(i){ 

    //use index! ->.eq(i) 

    //use common class at input 

    if($(this).is(":checked")==true) 

    { 

       $('.common_class_input').eq(i)//Do something 

    }else{ 

       $('.common_class_input').eq(i)//Do something 

      } 

}) 

}）;