CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcrazor
user3738893
user3738893

Reputation: 435

How to check/uncheck HTML CheckBoxFor with javascript/jQuery

I've looked at all the other answers to the question "How to check/uncheck a checkbox with Javascript/jQuery" and they seem to say to use:

$("#idSelector").prop('checked', true);
$("#idSelector").prop('checked', false);

However, since the razor html helper adds a second input element to the mix, this creates complications.

$(document).on("click", "input[type='radio']", function() {
  $("input[type='radio']").each(function() {
    var that = this;
    $(this).parent().siblings("#checkBoxArray").find(":checkbox").each(function(i, item) {
      $(item).prop('checked', that.checked);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 50px;">
  <div style="clear: both;"></div>
  <div style="margin: 25px; margin-top: 15px; margin-bottom: 10px;">
    <div id="CheckBoxRow" style="border-bottom: 1px solid lightgrey; padding-bottom: 10px;">
      <label>
        <input id="holeSizes" name="holeSizes" type="radio" value="4" data-bind="checked:holeSizes">Choice Group One</label>
      <div id="checkBoxArray" style="min-height: 18px;">
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="one" name="one" type="checkbox" value="true" data-bind="checked:one">
          <input name="one" type="hidden" value="false" data-bind="value:one">One</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="two" name="two" type="checkbox" value="true" data-bind="checked:two">
          <input name="two" type="hidden" value="false" data-bind="value:two">Two</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="three" name="three" type="checkbox" value="true" data-bind="checked:three">
          <input name="three" type="hidden" value="true" data-bind="value:three">Three</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="four" name="four" type="checkbox" value="true" data-bind="checked:four">
          <input name="four" type="hidden" value="false" data-bind="value:four">Four</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="five" name="five" type="checkbox" value="true" data-bind="checked:five">
          <input name="five" type="hidden" value="false" data-bind="value:five">Five</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="six" name="six" type="checkbox" value="true" data-bind="checked:six">
          <input name="six" type="hidden" value="false" data-bind="value:six">Six</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="seven" name="seven" type="checkbox" value="true" data-bind="checked:seven">
          <input name="seven" type="hidden" value="false" data-bind="value:seven">Seven</div>
      </div>
    </div>
  </div>
</div>

I have used this code to change the checkbox selection status based on which radio button is clicked and the checkboxes show a check as if they were selected, but the underlying value of the hidden input box is not changed to reflect this.

What code do I need to use to change both the visual checkbox and the hidden value?

Update

I've almost got it figured out. Kind of. These checkboxes are in a Kendo template which seems to be automatically applying a Knockout binding to each checkbox. 

data-bind="checked:one"

So changing the visual appearance of the box and the value of the hidden input by itself still isn't working completely. I added in another line to change the value of the data-binding, but this is still one step too short. I need to change the value of the model that the knockout binds to.

Is there an easy way to change the value of a data-bound model?

Upvotes: 1

Views: 9437

Answers (3)

RAVI VAGHELA
RAVI VAGHELA

Reputation: 897

This code is working for to change the checked status of checkbox to false if true.

if ($("#cbName").is(":checked")) {
            $("#cbName").click();
        }

Upvotes: 1

Contristo
Contristo

Reputation: 335

While this may not help the poster due to the age of this question, I hope this will help any that find this searching like I did, specifically for the Kendo().CheckBoxFor while editing a grid item. I was able to check/uncheck the way listeeeek mentioned but due to the under the hood stuff in kendo, the model it was bound to was not updating. I added the second line here to update the model

$("#CHECKBOXNAME").prop('checked', desiredBool);
$('#GRIDNAME').data().kendoGrid.editable.options.model.CHECKBOXITEM = desiredBool;

Hope this helps.

Upvotes: 0

listeeeek
listeeeek

Reputation: 46

If your code looks like:

@using(Html.BeginForm......
{
...
@Html.LabelFor(s=>s.idSelector, "idSelector")
@Html.CheckBoxFor(s=>s.idSelector)
...
}

only what you have to do for set checkbox as 'checked' is:

$("#idSelector").prop('checked', true);

Upvotes: 1

Related Questions