How to get value of property Speaks tuff on Model using jQuery?

Question

I work on asp.net MVC 5 .NET Framework . I face issue I can't get value of Property SpeakStuff when Page Load .

on object ResignationRequester property SpeakStuff represent by two check boxes Yes and No .

if SpeakStuff equal True then Yes checkbox will be checked

if SpeakStuff equal False then No checkbox will be checked

so How to do that when page load without user check depend on value on database .

my code as below :

<div> 
@Html.Label("Did You Meet/Speak to Staff", htmlAttributes: new { @class = "control-label col-md-5" })
  <div class="col-md-7">
      <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="true" class="speak-stuff-checkbox" @(Model.SpeakStuff ? "checked" : "") />
      Yes
      &nbsp;&nbsp;
      <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="false" class="speak-stuff-checkbox" @(!Model.SpeakStuff ? "checked" : "") />
      No
  </div>
</div>

 $('.speak-stuff-checkbox').on('change', function () {
     $('.speak-stuff-checkbox').not(this).prop('checked', false);
     var selectedValue = $(this).val();
     $('#SpeakStuff').val(selectedValue);
 });
  public class ResignationRequester
  {

   public bool SpeakStuff { get; set; }
  }
[HttpGet]
public async Task<ActionResult> Details(int? id, string msg)
{
  
    ResignationRequester workforceRequest = Workforce.ResignationGetRequestByID((int)id);
   
   //when check workforceRequest.SpeakStuff it will be true or false 
// so How to make check box yes checked when true and checkbox No checked when it False
    return View(workforceRequest);
}

so suppose workforceRequest.SpeakStuff=false then No will checked as Image below :

Answer 1

Use a radio button or a single checkbox.

I'm not a fan of reinventing the wheel or making code more complex than necessary but here you go.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div>
    @Html.Label("Did You Meet/Speak to Staff", htmlAttributes: new { @class = "control-label col-md-5" })
    <div class="col-md-7">
        <input type="checkbox" id="SpeakStuffYes" name="SpeakStuff" value="true" class="speak-stuff-checkbox" @(Model.SpeakStuff ? "checked" : "") />
        Yes
        &nbsp;&nbsp;
        <input type="checkbox" id="SpeakStuffNo" name="SpeakStuff" value="false" class="speak-stuff-checkbox" @(!Model.SpeakStuff ? "checked" : "") />
        No
    </div>
</div>

@section scripts
    {

    <script>
        $('.speak-stuff-checkbox').on('change', function () {
            var id = $(this).attr('id');
            var isChecked = $(this).prop('checked');

            if (id == 'SpeakStuffYes') {
                $('#SpeakStuffNo').prop('checked', !isChecked);
            }
            else {
                $('#SpeakStuffYes').prop('checked', !isChecked);
            }
        });
    </script>
}

namespace MvcDemo2.Controllers
{
    public class CheckboxController : Controller
    {
        // GET: Checkbox
        public ActionResult Index()
        {
            ResignationRequester model = new ResignationRequester() { SpeakStuff = false };
            return View(model);
        }
    }

    public class ResignationRequester
    {
        public bool SpeakStuff { get; set; }
    }
}

Answer 2

Hi @Ahmed Salah Abed Elaziz

Whether a CheckBox is selected or not is not related to its Value.

You can set a jquery code to set the value to "True" when selected, and "False" when not selected.

$(".speak-stuff-checkbox").change(function() {
  if ($(this).is(":checked")) {
    $(this).val("true");
  } else {
    $(this).val("false");
  }
});

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.