特定の条件で画面項目の活性、非活性を切り替える。

Question

以下のようなセレクトボックスが2つあるとします(↓現状２つとも常に活性状態)。

      <div class="class1">
        <p:selectOneMenu id="select1" value="#{form.value1}">
          <f:selectItem itemLabel="　" itemValue="#{null}"/>
          <f:selectItems value="#{form.Items}"/>
        </p:selectOneMenu>
      </div>
      <div class="class2">
        <p:selectOneMenu id="select2" value="#{form.value2}">
          <f:selectItem itemLabel="　" itemValue="#{null}"/>
          <f:selectItems value="#{form.Items}"/>
        </p:selectOneMenu>
      </div>
     

これを初期状態だと2つ目を非活性とし、
1つ目で何かしら値が選択されると2つ目が活性となり2つ目でも選択できるようにしたいです。
実現方法をご教授願います。

これを実現するには
disabledタグとJavaScriptを使用するのだと思っていますが、
JavaScriptの知識がほとんどゼロなものでやりかたが分からず質問させていただきました。