Data binding of states between paper elements

Question

Is it possible to bind a state (attribute) of a paper-checkbox [checked|unchecked] dynamically to an attribute like [readonly|disabled] inside a paper-input element? This is my implementation so far:

<template repeat="{{item in lphasen}}">
  <div center horizontal layout>
    <paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
      <div style="margin-left: 24px;" flex>
        <h4>{{item.name}}</h4>
      </div>
      <div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
  </div>
</template>

The behavior should be as follow: When the user uncheck a paper-checkbox, then the paper-input element in the same row should be disabled and/or readonly and vice versa. Is it possible to directly bind multiple elements with double-mustache or do I have to iterate the DOM somehow to manually set the attribute on the paper-input element? If YES, could someone explain how?

Answer 1

Another way to bind the checked state of the paper-checkbox.

<polymer-element name="check-input">
<template>
    <style>
    #checkbox {
      margin-left: 1em;
    }
    </style>
    <div center horizontal layout>
        <div><paper-input floatingLabel label="{{xlabel}}" value="{{xvalue}}" disabled="{{!xenable}}" type="number" min="15" max="200"></paper-input></div>
        <div><paper-checkbox id="checkbox" label="Enable" checked="{{xenable}}"></paper-checkbox></div>
    </div>
</template>
<script>
Polymer('check-input', {
  publish:{xenable:true, xvalue:'',xlabel:''}
});
</script>
</polymer-element>
    <div>
       <check-input xenable="true" xvalue="100" xlabel="Weight.1"></check-input>
       <check-input xenable="false" xvalue="185" xlabel="Weight.2"></check-input>
   </div>

jsbin demo http://jsbin.com/boxow/