啓用/禁用基於Jquery Ajax的複選框在下拉更改時調用服務器端方法

Question

在下拉選擇更改並基於服務器輸出（真或假）時尋找調用服務器端方法（Java）的方法，啓用或禁用少數複選框。如果有人能提供相同的建議，我將非常感激。

Answer 1

我已經編寫了一個快速示例，向您展示如何完成此操作。首先，您需要設置您的Java應用程序以允許使用Ajax調用。 Java應用程序需要輸入一個單一的帖子變量名稱selected，它是下拉菜單中所選選項的值。那麼Java應用程序將需要返回格式化過類似的JSON字符串：

{ 
    "disabled":[ 
     "1", 
     "3", 
     "5" 
    ] 
} 

的1，3，5代表你想被禁用的複選框的ID。這些可以是任何複選框的任何ID。如果它不在這個數組中，那麼將設置爲默認啓用。

HTML：

<select id="choiceSelector"> 
    <option value="1">Something 1</option> 
    <option value="2">Something 2</option> 
</select> 

<br/><br/> 
<div id="changingCheckboxes"> 
    <input type="checkbox" name="" id="1"><br/> 
    <input type="checkbox" name="" id="2"><br/> 
    <input type="checkbox" name="" id="3"><br/> 
    <input type="checkbox" name="" id="4"><br/> 
    <input type="checkbox" name="" id="5"><br/> 
    <input type="checkbox" name="" id="6"> 
</div>​ 

使用Javascript/jQuery的

function UpdateCheckBoxStatus() 
{ 
    var CurrentChoice = $('#choiceSelector').val(); 

    $.ajax({ 
     url: "####YOUR JAVA APP URL####", 
     data: { "selected": CurrentChoice }, 
     type: "post", 
     dataType: "json", 

     success: function (data) 
     { 
      SetCheckbox($('#changingCheckboxes').children("input:[type='checkbox']"), true); 
      $.each(data.disabled, function() 
      { 
       SetCheckbox($('#changingCheckboxes #' + this), false); 
      }); 
     } 
    }); 

} 

/// Sets the checkbox to enabled or disabled 
/// @param th Jquery reference of one or more checkboxes 
/// @param usable True/False if the checkbox is enabled/disabled 
function SetCheckbox (th, usable) 
{ 
    if (usable) 
     th.removeAttr("disabled"); 
    else if (!usable) 
     th.attr("disabled", true); 
} 


$(function() 
{ 
    $('#choiceSelector').change(UpdateCheckBoxStatus); 
    UpdateCheckBoxStatus(); //run for page load 
}); 

而且，這裏是它的的jsfiddle：http://jsfiddle.net/bpstw/1/

希望有所幫助。

Answer 2

當然。添加一個.change() handler到下拉元素，在處理程序內讓一個$.ajax() request將選定的值傳遞給你的Java（可能jQuery的快捷方式ajax方法$.get()或$.post()會比$.ajax()更容易），並在Ajax成功回調中檢查服務器的響應和啓用或禁用相關複選框。

Answer 3

另一個類似的單選按鈕解決方案，包括Java中的服務器端代碼。

的Jquery/HTML 值1 值2 值3

<span id="changingCheckboxes"> 
     <label for="group1">One</label> 
     <input type="radio" name="group1" id="1" value="option1"/> 
     <label for="group1">Two</label> 
     <input type="radio" name="group1" id="2" value="option2"/> 
     <label for="group1">Three</label> 
     <input type="radio" name="group1" id="3" value="option3"/> 
     <label for="group1">Four</label> 
     <input type="radio" name="group1" id="4" value="option4"/> 
</span> 

jQuery的

function UpdateCheckBoxStatus() { 
    var CurrentChoice = $("#dropDownId").val(); 
    $.ajax({ 
      url: "/serverSideUrl", 
      data: { "selectedDropDownId": CurrentChoice }, 
      type: "post", 
      dataType: "json", 
      success: function (data) { 
       SetCheckbox($("#changingCheckboxes").children("input:[type='radio']"), true); 
       $.each(data.disabled, function() { 
        SetCheckbox($("#changingCheckboxes #" + this), false); }); 
      } 
     }); 
    } 


function SetCheckbox (th, state) { 
     if (state) th.removeAttr("disabled"); 
     else if (!state) th.attr("disabled", true); 
    } 

$('#dropDownId').change(UpdateCheckBoxStatus); 

的Java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, 
     IOException { 
String selectedValue = request.getParameter("dropDownId"); 
YourDao yourDao = new YourDao(); 
Map<String, List<String>> disabledOptions = cycleDao.determineStateDropDown(selectedTool); 
String json = new Gson().toJson(disabledOptions); 
response.setContentType("application/json"); 
response.setCharacterEncoding("UTF-8"); 
response.getWriter().write(json); 
}