Bootstrap v.4.0.0 beta 3 - custom checkbox checked.bind not working

Help Requests
1

With the new styles for custom checkbox in beta 3, checked.bind no longer works. Neither does change.delegate.

      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked.bind="appUser.approved" change.delegate="onApprovedClicked()">            
        <label class="custom-control-label">Approved</label>
      </div>

      <input type="checkbox" checked.bind="appUser.approved" id="chkApproved">
      <label for="chkApproved">Approved</label>

Is there any workaround for this?

Thanks

2

There is nothing wrong with checked.bind.

Since the beta3 changed checkbox html structure to sibling input + label, instead of label wrapping around input, you need to make sure link the input and label properly with an id.

<div class="custom-control custom-checkbox">
  <input 
    type="checkbox" 
    class="custom-control-input" 
    checked.bind="appUser.approved"
    id="foo"
  >            
  <label class="custom-control-label" for="foo">Approved</label>
</div>
2 Likes
3

Thank you so much for your help.

Another benefit of doing this is that I don’t need to have a “false” array - I can do this now:

        <div class="col-9 d-flex justify-content-between">
          <div repeat.for="item of range" class="custom-control custom-radio">
            <input class="custom-control-input" type="radio" model.bind="item" id.bind="radioName($index, item)" checked.bind="value">
            <label class="custom-control-label" for.bind="radioName($index, item)">${item}</label>
          </div>
        </div>

export class SoilAnalysisRating {
  @bindable public label: string;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public value;

  public range = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  public radioName(index, value) {
    let labelName = (this.label.split(" ").join("")).toLowerCase();

    return "radios-" + labelName + "-" + index.toString() + value.toString();
  }
}

image
image.png1625Ă—630 55.7 KB

Actually, this begs the next question - what I really need here is a slider for 1 to 10

4

Html5 has input type “range”

5

Blimey - I had no idea!

I’m going off to study the html specs!

Thanks so much