How to change CheckBox with onChange from DropDownList in ASP.NET MVC Table?

Question

How to change CheckBox with onChange from DropDownList in ASP.NET MVC Table?

Navigation

#1 by (1 votes)
#2 by (1 votes)

5

I'm developing a site with ASP.NET MVC and Razor, I have one table with a few columns in one of my pages.

I have in this table a State column which has a CheckBox and another column containing a DropDownList with some options.

I would like that when I change the value of the DropDownList, the value of the CheckBox was also changed to checked, since I use the checked lines to send to the controller.

I have tried using the parent (JQuery) element, but I get a response that parents do not support.

Could someone help?

VIEW

<table class="table table-condensed table-bordered table-striped table-hover table-reflow">
    <thead class="thead-inverse">
        <tr>
            <th class="text-center bs-checkbox"><input type="checkbox" /></th>
            <th class="text-center col-md-5">Emitente</th>
            <th class="text-center">Manifestação</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.listaManifestacao)
        {
            <tr id="@item.Id">
                <td class="text-center">
                    <div class="bs-checkbox"><input type="checkbox" /></div>
                </td>                    
                <td class="text-center">@item.Emitente</td>
                <td class="text-center">
                    @Html.DropDownListFor(m => item.CodigoEvento, new SelectList(Model.listaOpcoesManifestacao, "Id", "Descricao", item.CodigoEvento), new { @class = "form-control", onchange = "CheckState(this);" })
                </td>
            </tr>
        }
    </tbody>
</table>

razor asp.net-mvc-5 checkbox table dropdown

asked by anonymous 20.05.2016 / 14:27

2 answers

How to print A4 pages using CSS? Where to put the business rule in the angle?

score 1 · Answer 1

Without using JQUery, only with Pure Javascript.

function check() {
    document.getElementById("red").checked = true;
}

function muda(){
  
   for(var i=0;i<document.getElementsByName("letras").length;i++)
      document.getElementsByName("letras")[i].checked = false;
  
  var x = document.getElementById("mySelect").value;
  for(i=0;i<=4;i++)
    
        document.getElementById(x).checked = true;
  
}

<select id="mySelect" onchange="muda()">
  <option value="a">A
  <option value="b">B
  <option value="c">C
  <option value="d">D
</select>
<br><br>


<input type="radio" name="letras" id="a">A<br>
  <input type="radio" name="letras" id="b">B<br>
  <input type="radio" name="letras" id="c">C<br>
  <input type="radio" name="letras" id="d">D

score 1 · Answer 2

I think this column in your table is redundant. Your question was not very clear, but I read in one of your comments that you can not update the checkbox column in the database. This happens because your checkbox does not even arrive in the controller, since in your code it does not have a name.

And when you put the name, it needs to conform to some rules so that the binder model can do its job. For a better understanding of how Collections ModelBinding works in AspNet Mvc 5, see the solution for this question . It's probably what you need. For a full explanation see this article

And to mark the checkbox with jquery (I did not test the code)

function checkState(element) {
    var checkbox = $(element).closest('input[type="checkbox"]');
    if ($(element).val() === ''){
        checkbox.prop('checked', false);
    } else {
        checkbox.prop('checked', true);
    }
}