How to disable a submit form button given a certain condition

Question

I would like to disable a cancel button if the the record field "Status" is already recorded as cancelled. I already know how to disable a button but the problem is how would the jquery know that the record field "Status" is Cancelled. Here Are the Codes

 @foreach (var rDetail in Model.Customers.ToList()) { 

      <tr>
    <td>
        @Html.DisplayFor(model => rDetail.DateEntry)
    </td>
    <td>
        @Html.DisplayFor(model => rDetail.DateStart)
    </td>
    <td>
        @Html.DisplayFor(model => rDetail.DateEnd)
    </td>
    <td>
        @Html.DisplayFor(model => rDetail.Status.Name)
    </td>

    <td>
        @Html.DisplayFor(model => rDetail.UserCode)
    </td>
    <td>
        @Html.DisplayFor(model => rDetail.DateModified)
    </td>
    <td>
        @Html.DisplayFor(model => rDetail.Remarks)
    </td>
    <td>
        @Html.ActionLink("Details", "Details", "RoomReservation", new { id = rDetail.Id}, null) |
        @using (Html.BeginForm("CancelReservation", "Rooms", new { roomId = Model.Id, reservationId = rDetail.Id, methodId = 0})) {
        <input type="submit" value="Cancel" class ="cancelSubmit"/>
        }
    </td>
</tr>

Any help will be appreciated, thanks :)

You want to make the button disabled when the status label is cancelled right? That too during render? — PSL
– PSL, Commented May 10, 2013 at 2:39

PSL · Accepted Answer · 2013-05-10 02:44:55Z

1

If you know the status is cancelled you can disable it in the Razor itself.

    <td>
        @Html.ActionLink("Details", "Details", "RoomReservation", new { id = rDetail.Id}, null);

  @if(rDetail.Status.Name.Equals("cancelled"))
  {
    <input type="submit" value="Cancel" class ="cancelSubmit" disabled/>
  }
  else
  {
        @using (Html.BeginForm("CancelReservation", "Rooms", new { roomId = Model.Id, reservationId = rDetail.Id, methodId = 0})) {
        <input type="submit" value="Cancel" class ="cancelSubmit"/>
        }
   }
    </td>

If you want to do it jquery way:-

$(function(){
$('.cancelSubmit').each(function(){
   if($(this).closest('tr').find('#Status_Name').text() === 'cancelled')
   {
       $(this).prop('disabled',true);
   }
  });
 });

or inside the function you could do :-

$(this).prop('disabled',
        $(this).closest('tr')
       .find('#Status_Name')
       .text() === 'cancelled');

answered May 10, 2013 at 2:44

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lou lising Over a year ago

Dude, you're a life saver. I used the razor method and it worked like a charm. Though I also tried the logic before but we differ on code syntax. I really need to increase my code dictionary on ASP.net MVC 4. Anyway, thanks again man.

PSL Over a year ago

Wow great, glad it worked. I just typed it in the editor itself, wasn't even sure syntax is right.. :)

lou lising Over a year ago

Well, at first it didn't worked but your "cancelled" is in small letter "c" as for my records where on a big letter "C", after changing it, it worked ^^

PSL Over a year ago

Use StringComparison.InvariantCultureIgnoreCase. i.e rDetail.Status.Name.Equals("cancelled",StringComparison.InvariantCultureIgnoreCase); So case won't matter.

Matt Berkowitz · Accepted Answer · 2013-05-10 02:45:22Z

0

If I understand you, something like this should work:

$('#Status_Name').on('keypress', function(e) { //I think that's how the XFor handlers format ids
    $('button_to_disable').prop('disabled', this.value === 'Cancelled');
});

answered May 10, 2013 at 2:45

Matt Berkowitz

9756 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to disable a submit form button given a certain condition

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related