jquery - 如何限制在禁用的 HTML 输入对象上传递值以供 ColdFusion cfquery 处理？

Question

我的 HTML/Web 编程技能几乎处于新手水平，我尝试对此进行一些搜索，但没有找到任何真正相关的内容。

下面我有一个代码示例，它使用一些 jQuery(我认为？基本上是 google 处理拼凑在一起的 - 我不知道 javascript 和 jQuery 之间的区别)来根据选择禁用/启用页面上的输入对象。我的目的是根据这些选择编译 ColdFusion cfquery，以编写比我们当前使用的查询更具体的查询。

请记住，我绝对想在 SQL 方面坚持使用 CF(基础设施已经在此处设置，我已经有一个应用程序可供引用，等等)，仅通过发送启用的值的最佳实践方法是什么用于加工？我的想法是使用表单并在新窗口中打开，但我不知道如何仅提交“启用”的输入对象。我认为除此之外的潜在选项可能是在此页面上的所有数据上运行 cfquery 并使用“显示”按钮来缩小范围(效率低下，只想查询我想要的数据)，或者找出一个提交禁用对象并为其分配一次性值的方法，该值可以在表单处理页面上忽略......但我希望一些忍者可以告诉我一种忍者方法来做到这一点。

==============

<script language="javascript">
$(function() {

var top_group_radio_buttons = $("#month_to_month, #specific_month");
var top_group_checkboxes = $("#group_time_focus_monthly, #group_time_focus_dow, #group_time_focus_hourly");
var group_by_dow_objects = $("#group_dow_sunday, #group_dow_monday, #group_dow_tuesday, #group_dow_wednesday, #group_dow_thursday, #group_dow_friday, #group_dow_saturday");
var group_by_hourly_objects = $("#group_hourly_1, #group_hourly_2, #group_hourly_3, #group_hourly_4, #group_hourly_5, #group_hourly_6, #group_hourly_7, #group_hourly_8, #group_hourly_9, #group_hourly_10, #group_hourly_11, #group_hourly_12, #group_hourly_13, #group_hourly_14, #group_hourly_15, #group_hourly_16, #group_hourly_17, #group_hourly_18, #group_hourly_19, #group_hourly_20, #group_hourly_21, #group_hourly_22, #group_hourly_23, #group_hourly_24");
var month_to_month_objects = $("#starting_month, #starting_year, #ending_month, #ending_year");

$(":radio").click(function(event) {
    if (this.id == "group")
       {
        top_group_radio_buttons.removeAttr("disabled");
        top_group_checkboxes.removeAttr("disabled"); 
        if ($("#group_time_focus_dow").is(":checked"))
           {
            group_by_dow_objects.removeAttr("disabled");
           }
        if ($("#group_time_focus_hourly").is(":checked"))
           {
            group_by_hourly_objects.removeAttr("disabled");
           }
        if ($("#month_to_month").is(":checked"))
           {
            month_to_month_objects.removeAttr("disabled");
            $("#annual_month").attr("disabled", true);
           }
        if ($("#specific_month").is(":checked"))
           {
            month_to_month_objects.attr("disabled", true);
            $("#annual_month").removeAttr("disabled");
           }
       }
    else if (this.id == "individual")
       {
        top_group_checkboxes.attr("disabled", true);
        top_group_radio_buttons.attr("disabled", true);
        group_by_dow_objects.attr("disabled", true);
        group_by_hourly_objects.attr("disabled", true);
        month_to_month_objects.attr("disabled", true);
        $("#annual_month").attr("disabled", true);
       }
    else if (this.id == "specific_month")
       {
        month_to_month_objects.attr("disabled", true);
        $("#annual_month").removeAttr("disabled");
       }
    else if (this.id == "month_to_month")
       {
        month_to_month_objects.removeAttr("disabled");
        $("#annual_month").attr("disabled", true);
       }    
});
});

$(function() {
$(":checkbox").click(function(event) {

   if (this.id == "group_time_focus_dow")
      {
         var dow_objects = $("#group_dow_sunday, #group_dow_monday, #group_dow_tuesday, #group_dow_wednesday, #group_dow_thursday, #group_dow_friday, #group_dow_saturday");
         if($(this).is(":checked"))
           {
              dow_objects.removeAttr("disabled");
           }
         else
           {
              dow_objects.attr("disabled", true);
           }
      }
   if (this.id == "group_time_focus_hourly")
      {
         var hourly_objects = $("#group_hourly_1, #group_hourly_2, #group_hourly_3, #group_hourly_4, #group_hourly_5, #group_hourly_6, #group_hourly_7, #group_hourly_8, #group_hourly_9, #group_hourly_10, #group_hourly_11, #group_hourly_12, #group_hourly_13, #group_hourly_14, #group_hourly_15, #group_hourly_16, #group_hourly_17, #group_hourly_18, #group_hourly_19, #group_hourly_20, #group_hourly_21, #group_hourly_22, #group_hourly_23, #group_hourly_24");
         if($(this).is(":checked"))
           {
              hourly_objects.removeAttr("disabled");
           }
         else
           {
              hourly_objects.attr("disabled", true);
           }
      }
});
});

</script>

      <input type=radio name="group_or_individual" id="individual" value="individual" checked>Individual Statistics
      <br /> <hr />
  <input type=radio name="group_or_individual" id="group" value="group">Group Statistics
  <ul id="List1" style="list-style-type: none;">
     <li>
        <input type=radio name="comparison_interval" id="month_to_month" value="month_to_month" disabled checked>Consecutive Month-to-Month Comparison (ie, Jan 2011, Feb 2011, Mar 2011, etc)
     </li>
     <li>   
        <input type=radio name="comparison_interval" id="specific_month" value="specific_month" disabled>Specific Month in Previous Years (ie, Jan 2010, Jan 2011, Jan 2012, etc) <li /> <li />
     </li>
     <li>
        Starting Year
        <select name="starting_year" id="starting_year" disabled>
           <option value="2010">2010
           <option value="2011">2011
        </select>
        Starting Month
        <select name="starting_month" id="starting_month" disabled>
           <option value="1">Jan
           <option value="2">Feb
           <option value="3">Mar
           <option value="4" selected>Apr
           <option value="5">May
           <option value="6">Jun
           <option value="7">Jul
           <option value="8">Aug
           <option value="9">Sep
           <option value="10">Oct
           <option value="11">Nov
           <option value="12">Dec
        </select>
     </li>
     <li>
        Ending Year  
        <select name="ending_year" id="ending_year" disabled>
           <option value="2010">2010
           <option value="2011">2011
        </select>
        Ending Month  
        <select name="ending_month" id="ending_month" disabled>
           <option value="1">Jan
           <option value="2">Feb
           <option value="3">Mar
           <option value="4" selected>Apr
           <option value="5">May
           <option value="6">Jun
           <option value="7">Jul
           <option value="8">Aug
           <option value="9">Sep
           <option value="10">Oct
           <option value="11">Nov
           <option value="12">Dec
        </select>    
     </li>
     <li>
        Specific Month to be Compared Annually
        <select name="annual_month" id="annual_month" disabled>
           <option value="1">Jan
           <option value="2">Feb
           <option value="3">Mar
           <option value="4">Apr
           <option value="5">May
           <option value="6">Jun
           <option value="7">Jul
           <option value="8">Aug
           <option value="9">Sep
           <option value="10">Oct
           <option value="11">Nov
           <option value="12">Dec
        </select>
     </li> <li />
        <ul id="List2" style="list-style-type: none;"
           <li>
              <input type=checkbox name="group_time_focus_monthly" id="group_time_focus_monthly" disabled checked><label>Call Data By Month</label>
           </li>
           <li>
              <input type=checkbox name="group_time_focus_dow" id="group_time_focus_dow" disabled><label>Call Data By Day of Week</label> <li />
                 <ul id="List3" style="list-style-type: none;">
                    <li>
                       <b>Include Days:</b>
                    </li>
                    <li> <input type=checkbox name="group_dow_sunday" id="group_dow_sunday" disabled checked> Sunday </li>
                    <li> <input type=checkbox name="group_dow_monday" id="group_dow_monday" disabled checked> Monday </li>
                    <li> <input type=checkbox name="group_dow_tuesday" id="group_dow_tuesday" disabled checked> Tuesday </li>
                    <li> <input type=checkbox name="group_dow_wednesday" id="group_dow_wednesday" disabled checked> Wednesday </li>
                    <li> <input type=checkbox name="group_dow_thursday" id="group_dow_thursday" disabled checked> Thursday </li>
                    <li> <input type=checkbox name="group_dow_friday" id="group_dow_friday" disabled checked> Friday </li>
                    <li> <input type=checkbox name="group_dow_saturday" id="group_dow_saturday" disabled checked> Saturday </li>
                 </ul>                
           </li>
           <li>
              <input type=checkbox name="group_time_focus_hourly" id="group_time_focus_hourly" disabled><label>Call Data By Hourly Interval</label> <li />
              <ul id="List4" style="list-style-type: none;">
                    <li>
                       <b>Include Hourly Interval:</b>
                    </li>
                    <li> <input type=checkbox name="group_hourly_1" id="group_hourly_1" disabled checked> 12AM - 1AM&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_13" id="group_hourly_13" disabled checked> 12PM - 1PM </li>
                    <li> <input type=checkbox name="group_hourly_2" id="group_hourly_2" disabled checked> 1AM - 2AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_14" id="group_hourly_14" disabled checked> 1PM - 2PM </li>
                    <li> <input type=checkbox name="group_hourly_3" id="group_hourly_3" disabled checked> 2AM - 3AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_15" id="group_hourly_15" disabled checked> 2PM - 3PM </li>
                    <li> <input type=checkbox name="group_hourly_4" id="group_hourly_4" disabled checked> 3AM - 4AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_16" id="group_hourly_16" disabled checked> 3PM - 4PM </li>
                    <li> <input type=checkbox name="group_hourly_5" id="group_hourly_5" disabled checked> 4AM - 5AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_17" id="group_hourly_17" disabled checked> 4PM - 5PM </li>
                    <li> <input type=checkbox name="group_hourly_6" id="group_hourly_6" disabled checked> 5AM - 6AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_18" id="group_hourly_18" disabled checked> 5PM - 6PM </li>
                    <li> <input type=checkbox name="group_hourly_7" id="group_hourly_7" disabled checked> 6AM - 7AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_19" id="group_hourly_19" disabled checked> 6PM - 7PM </li>
                    <li> <input type=checkbox name="group_hourly_8" id="group_hourly_8" disabled checked> 7AM - 8AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_20" id="group_hourly_20" disabled checked> 7PM - 8PM </li>
                    <li> <input type=checkbox name="group_hourly_9" id="group_hourly_9" disabled checked> 8AM - 9AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_21" id="group_hourly_21" disabled checked> 8PM - 9PM </li>
                    <li> <input type=checkbox name="group_hourly_10" id="group_hourly_10" disabled checked> 9AM - 10AM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_22" id="group_hourly_22" disabled checked> 9PM - 10PM </li>
                    <li> <input type=checkbox name="group_hourly_11" id="group_hourly_11" disabled checked> 10AM - 11AM&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_23" id="group_hourly_23" disabled checked> 10PM - 11PM </li>
                    <li> <input type=checkbox name="group_hourly_12" id="group_hourly_12" disabled checked> 11AM - 12PM&nbsp;&nbsp;&nbsp;<input type=checkbox name="group_hourly_24" id="group_hourly_24" disabled checked> 11PM - 12AM </li>
               </ul>
           </li>   
        </ul>
     </li>
  </ul> 

Answer 1

你那里的东西可以很好地工作。禁用的表单字段不会在表单提交时发送。

需要非常小心的一件事是，仅仅因为前端有 javascript 正在尽其所能阻止事情发生，您的服务器端代码仍然需要假设所有发生的事情都是是敌对的，需要检查所有输入以确保它们有效。