2016-01-05 3 views
1

У меня есть следующий код: В модели:как включить кнопку в Mvc бритвы на основе радиокнопки

<div class="line"></div> 

<div class="clearfix"></div> 
     @Html.RadioButtonFor(x => x.Vehicle.Car, "Car") 
     @Html.LabelFor(x => x.Vehicle.Car) 
<div class="clearfix"></div> 
     @Html.RadioButtonFor(x => x.Vehicle.Van, "Van") 
     @Html.LabelFor(x => x.Vehicle.Van) 
<div class="line"></div> 
<div class=".col-md-6 .col-sm-4 text-center"> 
     <button type="button" class="btn btn-primary" disabled >submit</button> 
</div> 

Я хотел бы включить кнопку Submit, если один из радио-кнопки выбираются. С использованием метода htmlhelper, не уверен в использовании метода Jquery на нем. Любая помощь высоко ценится.

+0

Для считывания и управления состоянием DOM вам необходимо использовать JavaScript. – sidneydobber

ответ

3

Вы можете сделать это на стороне клиента. В приведенном ниже примере предполагается, что на вашей странице есть библиотека jQuery.

Предполагая, что вид модель Вашего отношения имеет Vehicle свойство, которое имеет типа Vehicle перечисления как этот

public enum Vehicle 
{ 
    None, Car, Van 
} 
public class CreateUser 
{ 
    public Vehicle Vehicle { set; get; } 
    // Other properties as needed 
} 

Дайте класс CSS для радио-кнопки и и идентификатор кнопки отправки для облегчения выбора JQuery.

@model YourNamespaceHereForViewModelClass.CreateUser 
@using (Html.BeginForm()) 
{  
    @Html.RadioButtonFor(x => x.Vehicle, "Car",new {@class="myVehicle"}) 
    @Html.Label(Vehicle.Car.ToString()) 

    @Html.RadioButtonFor(x => x.Vehicle, "Van", new { @class = "myVehicle" }) 
    @Html.Label(Vehicle.Van.ToString()) 

    <button type="button" id="mySubmit" class="btn btn-primary" disabled>submit</button> 
} 

и в сценарии, на событии документ ready проверить любой из двух переключателей проверяются и включить/отключить кнопку отправки. Также прослушайте событие change и включите переключатель.

$(function() { 

    // When the page loads,Check any radio button is checked, If yes enable submit button 
    if ($(".myVehicle:checked").length) { 
     $("#mySubmit").prop('disabled', false); 
    } 

    // When user checks a radio button, Enable submit button 
    $(".myVehicle").change(function (e) { 
     if ($(this).is(":checked")) { 
      $("#mySubmit").prop('disabled', false); 
     } 
    }); 

}); 

Here - рабочий образец скрипта js.

Смежные вопросы