asp.net mvc - how to enable a button in mvc razor based on radio button -
i have following code: in model:
<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> i enable submit button if either of radio button selected. since using htmlhelper method, not sure of using jquery method on it. highly appreciated.
you can in client side. below example assumes have jquery library included in page.
assuming views' view model has vehicle property of type vehicle enum this
public enum vehicle { none, car, van } public class createuser { public vehicle vehicle { set; get; } // other properties needed } give css class radio button , and id submit button easier jquery selection.
@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> } and in script, on document ready event check whether of 2 radio buttons checked , enable/disable submit button. listen change event , enable radio button.
$(function () { // when page loads,check radio button checked, if yes enable submit button if ($(".myvehicle:checked").length) { $("#mysubmit").prop('disabled', false); } // when user checks radio button, enable submit button $(".myvehicle").change(function (e) { if ($(this).is(":checked")) { $("#mysubmit").prop('disabled', false); } }); }); here working js fiddle sample.
Comments
Post a Comment