Correct way to disable multiple Textarea / checkbox depends on the dropdown box's Value

问题

I'm looking for an effective way to enable / disable multiple controls (textarea, checkbox) through dropbox. I.e. Selecting item A in dropbox will disable certain controls, while selecting item B in dropbox will disable some other controls. Codes on how I approach with disabling textbox:

HTML:

<template name="Gender">
<input  disabled={{shouldBeDisabled}} class="input" type="text"/>
</template>

<template name="DoB">
<textarea rows="3" cols="27" disabled={{shouldBeDisabled}}>purpose</textarea>
</template>

js:

Template.registerHelper("shouldBeDisabled", function() {
  return true
});

Question 1: Do we require a registerHelper function for each individual control? In the code above it seems like the registerhelper will either disable or enable both control as oppose to individual, but having multiple registerhelper seems redundant.

Question 2: How can we control the value in registerHelper via dropbox (i.e. select)? I can return the value from the dropbox, is building a switch inside registerhelper the correct way and how does it incorporate into question 1?

Question 3: Is there a build-in function to add visual effect on disabled controls? (i.e.grey out)

回答1:

The way I have done this in the past w/ Meteor and Blaze is to setup a event listener on the dropdown that sets a reactive var/session variable that I then read in a helper. The helper would return the string "disabled" depending on the value.

For instance (this is from memory...I don't have access to Meteor right now, and I have switched over to React/Mantra):

Template.MyComponent.oncreated(function() {
  this.isDropdownDisabled = new ReactiveVar();
});

Template.MyComponent.events({
  'change #myDropdown'(event) {
    this.isDropdownDisabled.set($('#myDropdown').val() == 'Selected' ? true : false);
  }
});

Template.MyComponent.helpers({
  isDropdownSelected() {
    return this.isDropdownDisabled.get() == true ? '' : 'disabled';
  }
});

<select id="myDropdown">
  <option value="Not Selected">Not Selected</option>
  <option value="Selected">Select Me</option>
</select>

<input id="myDynamicallyDisabledInput" type="textbox" name="dnyamic1" {{isDropdownSelected}} />

That should roughly be correct. Basic idea is that you use a reactive var to store the "state" of the dropdown value, flip the "state" when that value changes, and use a help in the inputs to determine if the disabled attribute needs to be set or not. Since helper functions are reactive by default, swapping the state var will cause the template to re-evaluate any time the dropdown value changes.

Anyone can feel free to edit this response to clean up any bad code above, as again I haven't used Blaze in some time and I did this all from memory.

来源：https://stackoverflow.com/questions/38383355/correct-way-to-disable-multiple-textarea-checkbox-depends-on-the-dropdown-box

标签

meteor