Checkbox getting checked from outside and jQuery change not working

JavaScript
1

I have the following code in the JSFiddle and I’m facing two issues:

Issue #1:

If I click anywhere outside Go Right, Employee Decision etc checkbox, it is still getting checked.Why it is happening like this? I was expecting it to get checked only when user clicks on the checkbox.

image

Issue #2:

I’m trying to select Tag1 when Late Payment is selected from the Delay Reason for All Employees dropdown using jQuery but that doesn’t seem to be working.

2

I assume you mean if you click on the words “Go Right”, “Turn Off the Switch”, etc or the white space to the right of those words.
That’s because you’ve wrapped the checkbox in the Label, which is taking up the whole box left-right. Clicking on a Label assigned to a click-sensitive input will trigger the input.

call $("#reasontagSelect").trigger("change"); after you update the value, so that Javascript redraws the box and notices that the value’s changed. Your code is setting the value, its just not triggering a redraw.

3

Yes, that’s correct. Is it fixable keeping the layout of the User interface design same?

4

Yes, this worked. Thanks!

5

Define ‘fixable’. What do you want to be clickable/not clickable?

6

I only want the checkbox to be checked when the user clicks on the checkbox and not when the whitespace is clicked or the behavior that’s happening now.

7

change the <label> tag to a <div>.

8

You are aware that reducing the target size makes things more difficult for those with fine motor control issues, aren’t you?

4 Likes
9

The label text should also trigger the change for better accessibility. Just change the display:block on the labels to display:inline-block. That will stop the white space to the right of the text being clickable.

It looks like you have them all wrapped in divs anyway so that shouldn’t trigger a change in layout although I haven’t tested as js fiddle doesn’t work on a mobile.

Alternatively I guess you could just set width:fit-content to the label but again I haven’t tested that.

1 Like
10

First off looking at your html you have duplicate ids of id='topList' — ids need to be unique

A bit of a re-work of your HTML. Putting the label after the checkbox seems to do the trick. Note I have added the for attribute to connect each label to it’s associated input.

HTML

<form action=''>
  <div class='employee-options grid-center'>
    <div class='checkbox-option'>
      <input id='toplist' name='toplist' type='checkbox'/>
      <label for='toplist'>Employee Sign</label>
    </div>
    <div class='employee-decisions'>
      <div class='checkbox-option'>
        <input id='list01' name='list01' type='checkbox'/>
        <label for='list01'>Employee Decision</label>
      </div>
      <div class='sub-options'>
        <div class='checkbox-option'>
          <input id='list02' name='list02' type='checkbox'/>
          <label for='list02'>Go Right</label>
        </div>
        <div class='checkbox-option'>
          <input id='list03' name='list03' type='checkbox'/>
          <label for='list03'>Turn Off the Switch</label>
        </div>
        <div class='checkbox-option'>
          <input id='list04' name='list04' type='checkbox'/>
          <label for='list04'>Go Left</label>
        </div>
      </div>
    </div>
  </div>
</form>

CSS

.employee-options {
  outline: 2px solid red;
  padding: 1rem;
}

.employee-options .checkbox-option {
  margin-bottom: .5rem;
}

.employee-options label {
  cursor: pointer;
  /* prevent label text selection on double click */
  user-select: none;
}

.sub-options {
  margin-left: 20px;
}

11

Regards the JS and HTML

Your labels should all have for attributes. This issue is being logged in the console log.

Working with just some minor changes to the HTML. Tidying up your camelCase and removing inline javascript e.g. onchange="reasonChanged()" // removed

HTML reasonSelect

<div>
  <label for="reasonSelect" class="required-field-label">Delay Reason for All Employees</label>
  <select id="reasonSelect" name="reasonSelect">
    <option value="">-No Selection-</option>
    <option value="Late Payment">Late Payment</option>
    <option value="Options Test One">Options Test One</option>
  </select>
</div>

HTML reasonTagSelect

<div>
  <label for="reasonTagSelect" class="requiredFieldLabel">Tag</label>
  <select id="reasonTagSelect" name="reasonTagSelect">
    <option value="">-No Selection-</option>
    <option value="tag01">Tag1</option>
    <option value="tag02">Tag2</option>
  </select>
</div>

JS
I don’t do much with jQuery, but this is how I would do it, keeping the JS separate to the HTML

function reasonChanged(event) {
  // on an event e.g. an onchange, an event object is passed to the handler
  // the item that the event occurred on e.g. #reasonSelect, is the event.target
  const input = event.target

  if (input.value === 'Late Payment') {
    $("#reasonTagSelect")
      .val("tag01")
      .trigger("change");
  }
}
// add an onchange listener to #reasonSelect passing in the handler function.
$('#reasonSelect').change(reasonChanged);

Edit:
You could have the handler reset to a default ‘no selection’ option, if the value is not ‘Late Payment’

function reasonChanged(event) {
  // on an event e.g. an onchange, an event object is passed to the handler
  // the item that the event occurred on e.g. #reasonSelect, is the event.target
  const input = event.target;
  const tagSelect = $("#reasonTagSelect");

  if (input.value === 'Late Payment') {
    tagSelect.val("tag01");
  } else {
    // reset to default "-No Selection-"
    tagSelect.val("");
  }
  
  tagSelect.trigger("change");
}

// add an onchange listener to #reasonSelect passing in the handler function.
$('#reasonSelect').change(reasonChanged);
1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.