Disable an input field when checking a checkbox in Backbone

Question

I'm completely new to Backbone.js and jQuery and I'm trying to set an input field of a form to "disabled" when I check a checkbox. I'm not sure if I have to do it the way I show in the code below, if so what should I do in the disableInput function?

JS

events: {
    'change #myCheckbox': 'disableInput',
},

disableInput : function(){
...
}

HTML

<div class="x">
      <input type="text" id="myInput">
      <input type="checkbox" id="myCheckbox">
<div>

EDIT: This may seem like dupplicate of other posts, but those questions are about vanilla JS I'm using Backbone here so it's not the same.

Possible duplicate of enable/disable input fields with checkboxes (javascript) — happymacarts
– happymacarts, Commented Feb 28, 2018 at 16:39
wont a vanilla javascript option work? down vote You check the state of the checkbox document.getElementById("myInput").disabled= document.getElementById('myCheckbox').checked — happymacarts
– happymacarts, Commented Feb 28, 2018 at 16:42

Hunter Turner · Accepted Answer · 2018-02-28 17:19:30Z

2

If you want to go the pure CSS route, you can place the checkbox above the text and switch the order to your liking using flexbox. Then, you can write CSS that changes the opacity and pointer-events for the checkbox sibling.

.x {
  display: flex;
}

.x #myCheckbox {
  order: 2;
}

.x #myCheckbox:checked + #myInput {
  pointer-events: none;
  opacity: 0.6;
}

<div class="x">
  <input type="checkbox" id="myCheckbox">
  <input type="text" tabindex="-1" id="myInput">
</div>

Tab Issue

In order to stop someone from tabbing into the input, you can add tabindex="-1" to the input.

edited Feb 28, 2018 at 17:19

answered Feb 28, 2018 at 16:51

Hunter Turner

6,94411 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scath Over a year ago

Was just testing it, but if you add tabindex="-1" to the input it will stop the tabbing. NVM :P

Hunter Turner Over a year ago

I just googled it and found the same solution, haha xD

happymacarts · Accepted Answer · 2018-02-28 16:52:27Z

1

Here is a simple one liner Granted I am not familiar with backbone.js but you should be able to figure out how to incorporate this.

function disableInput(){
document.getElementById("myInput").disabled=document.getElementById('myCheckbox').checked
}

<div class="x">
      <input type="text" id="myInput">
      <input type="checkbox" onchange="disableInput();" id="myCheckbox">
<div>

edited Feb 28, 2018 at 16:52

answered Feb 28, 2018 at 16:45

happymacarts

2,5942 gold badges29 silver badges36 bronze badges

3 Comments

Emile Bergeron Over a year ago

This is a Backbone question, using vanilla JS and inline onchange event is really going in the wrong direction.

happymacarts Over a year ago

@Emile Bergeron I only used the onchange for the purpose of the snippet. hopefully the poster can figure out how to use this best. Maybe someday i will add backbone to my toolbox :)

Ayane Over a year ago

@happymacarts I accepted your answer because it essencially works, but as Emile Bergeron said I'm using Backbone so I will have to see how to get the element by id things the way Backbone does it, just to do it "more elegantly". For the inline onchange i just replaced it for the code i posted of my JS.

akmed0zmey · Accepted Answer · 2018-03-14 06:36:19Z

0

I think Backbone way would be the following

events: {
    "change #myCheckbox": function() {this.disableInput.apply(this, arguments);}
},

disableInput: function(args) {
    var checked = $(args.target).is(":checked");
    this.$el.find("#myInput").disabled = checked;
}

answered Mar 14, 2018 at 6:36

akmed0zmey

5836 silver badges14 bronze badges

Collectives™ on Stack Overflow

Disable an input field when checking a checkbox in Backbone

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related