Включить / отключить флажок, основанный на методе Jquery Ajax Call to Server side при изменении выпадающего списка

Question

В поисках способа вызова метода на стороне сервера (Java) при изменении раскрывающегося списка и на основе выходных данных сервера (TRUE OR FALSE) установите или отключите несколько флажков.Буду очень признателен, если кто-нибудь может дать рекомендации примерно так же.

Answer 1

Я привел быстрый пример, чтобы показать вам, как это будет сделано.Сначала вам нужно настроить приложение Java, чтобы разрешить вызовы AJAX.Java-приложение должно будет принять в качестве входных данных одно переменное имя сообщения selected, которое является значением выбранной опции в раскрывающемся меню.Затем java-приложение должно будет вернуть строку json, отформатированную аналогично:

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

1, 3 и 5 представляют идентификаторы флажков, которые вы хотели бы отключить.Это могут быть любые идентификаторы любых флажков.Если его нет в этом массиве, по умолчанию будет включен.

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

Еще одно аналогичное решение для кнопки Radio, включая код на стороне сервера в Java.

Jquery / HTML Value1 Value2 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);
}

Answer 3

Конечно.Добавьте .change() обработчик к раскрывающемуся элементу, в обработчике выполните $.ajax() запрос , передав выбранное значение вашей Java (возможно, jQuery-ярлык ajax-методы $.get()или $.post() было бы проще, чем $.ajax()), и в рамках успешного обратного вызова Ajax проверьте ответ сервера и включите или отключите соответствующие флажки.