Проверьте флажки в форме MVC - PullRequest
Новая
       10

Проверьте флажки в форме MVC

1 голос
/ 04 июня 2010

У меня есть таблица в форме ASP.NET MVC2. На каждом ряду в таблице есть флажок. Под столом есть кнопка подтверждения.

Я хочу отключить кнопку, если не установлен ни один из флажков. 

<% using Html.BeginForm(....) { %>
<table>
<% foreach (var item in Model) { %>
    <tr> <td>
    <input type="checkbox" name="selectedContacts" />
    </td></tr>
<% } //End foreach %> 
</table>
<% } //End using %> 

<input type="submit" value="Create selection" name="CreateSelectionAction" />

Количество строк / флажков будет варьироваться от 1 до многих.

Как я могу использовать MVC2 / jQuery, чтобы потребовать от пользователя установить минимум один флажок перед нажатием кнопки Отправить?

Редактировать ; Из трех приведенных ниже ответов я не смог заставить их работать. Ничего не происходит при установке флажков, и никаких ошибок Javascript не возникает. Настройка небольшой награды.

EDIT2 ; Вот чем я закончил. Я дал форме имя createSelectionForm и использовал этот jQuery. 

    $(document).ready(function () {
        $('#createSelectionForm, input[type="checkbox"]').click(function () {
            if ($('#createSelectionForm, input[type="checkbox"]:checked').length == 0) {
                $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled');
            } else {
                $('input[name="CreateSelectionAction"]').removeAttr('disabled');
            }
        });
    });

Ответы [ 5 ]

3 голосов
/ 04 июня 2010

Попробуйте это: 

<script type="text/javascript">
  $(document).ready(function() {
    $('#form-id input[type="checkbox"]').change(function() {
      if ($('#form-id input[type="checkbox"]:checked').length == 0) {
        $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled');
      } else {
        $('input[name="CreateSelectionAction"]').removeAttr('disabled');
      }
    });
  });
</script>

Это было слишком написано по памяти. Я не пробовал.

2 голосов
/ 04 июня 2010

Это в основном делает:

  • Добавить обработчик в поля выбора
  • В обработчике проверьте, сколько выделено
  • Если 0, отключите кнопку
  • Если !0, тогда включите кнопку 
$('input[name="selectedContacts"]').click(function() {
    var $button = $('input#CreateSelectionAction');
    if($('input[name="selectedContacts"]:checked').length === 0) {
         $button.removeAttr('disabled');
    } else {
         $button.attr('disabled','disabled');
    }
}
0 голосов
/ 11 июня 2010

Это работает для меня: 

$(function() {
    if ($('table input[type="checkbox"]:checked').length == 0) {
        $('input[type="submit"]').attr('disabled', 'disabled');
    }

    $('table input[type="checkbox"]').click(function() {
        if ($('table input[type="checkbox"]:checked').length == 0) {
            $('input[type="submit"]').attr('disabled', 'disabled');
        } else {
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
})();
0 голосов
/ 11 июня 2010

Попробуй это 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Checkbox Demo</title>
        <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
        <script src="../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
            <h1>Checkbox Demo</h1>
            Checkbox 1: <input type="checkbox" class="validatecheckbox" /><br />
            Checkbox 2: <input type="checkbox" class="validatecheckbox" /><br />
            Checkbox 3: <input type="checkbox" class="validatecheckbox" /><br />
            Checkbox 4: <input type="checkbox" class="validatecheckbox" /><br />

            <input type="submit" value="Create selection" id="createselection" />
        </form>

    <script type="text/javascript">
        $(document).ready(Initialize);

        function Initialize() {
            $(".validatecheckbox").change(Validate);
            Validate();
        };

        function Validate() {
            var valid = false;

            valid = $(".validatecheckbox:checked").length > 0;

            if (!valid) {
                $("#createselection").attr("disabled", true);
                return false;
            }
            else {
                $("#createselection").attr("disabled", false);
                return true;
            }
        }
    </script>
    </body>
    </html>
0 голосов
/ 04 июня 2010

Это должно сработать, я сожалею, что мой ответ был полностью неверным, я сделал то, что вы хотели. Вот исправленная версия.

Когда DOM будет готов, он проверит все флажки в вашей таблице. Если хотя бы один из них выбран, он отключит кнопку отправки. Если вы щелкнете по одному из флажков, он включит его снова, а если вы снимите флажок, он проверит и другие флажки, и если ни один из них не будет выбран, он отключит его. 

$.checker = function() {
    $('table input[type="checkbox"]').each(function() {
        if(!$(this).is(':checked')) {
            $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled');
        }                   
    });
}

$(document).ready(function() {
    $.checker();

    $('input[type="checkbox"]').click(function() {
        if($(this).is(':checked')) {
            $('input[name="CreateSelectionAction"]').removeAttr('disabled');
        } else {
            $.checker();
        }
    });             
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...