ドロップダウンの変更時にJquery Ajax Call to Server側メソッドに基づいてチェックボックスを有効/無効にします

Question

ドロップダウン選択時にサーバーサイドメソッド（Java）を呼び出す方法を探して、サーバー出力に基づいて（TRUEまたはFALSE）少数のチェックボックスを無効にします。誰かが同じものの周りのお勧めを提供できる場合は非常に感謝します。

Answer 1

私はこれがどのように行われるかを示す簡単な例をコーディングしました。まず、Javaアプリを設定してajax呼び出しを許可する必要があります。 Javaアプリケーションは、ドロップダウンメニューで選択されたオプションの値である単一のポスト変数名selectedを入力として取り込む必要があります。 Javaアプリケーションは、その後、あまりにも似たフォーマットされたJSON文字列を返す必要があります：

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

1、3、および5を使用すると、無効にすることがしたいのチェックボックスのIDを表します。これらはいずれかのチェックボックスの任意のIDにすることができます。この配列にない場合、はがデフォルトで有効に設定されます。

HTML

： http://jsfiddle.net/bpstw/1/

希望に役立ちます：

<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です。

Answer 2

.change() handlerをハンドラ内のドロップダウン要素に追加します。$.ajax() requestは、選択した値をJavaに渡します（おそらくjQueryのショートカットajaxメソッド$.get()または$.post()は$.ajax()よりも簡単です）。Ajax成功コールバックでは、関連するチェックボックスを有効または無効にします。

Answer 3

Javaのサーバーサイドコードを含むラジオボタンの別の同様のソリューション。

のjQuery/HTML 値1 値2 VALUE3

<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); 
}