Javascriptで特定文字列を<input>タグ内に挿入したい

###前提・実現したいこと
フォームにて「設問1で回答Bを選択した場合のみ設問2を表示する」という機能を実装しました。
その際、回答Bを選択した場合のみ、バリデーションを有効にしたいと考えています。

バリデーションには、Validattaを使用しており、バリデーションを有効にするためには、
<input>タグ内に「data-validetta="required"」という文字列を挿入する必要があります。

上記文字列を挿入する対象には、add-validationクラスを設定してあります。

このような前提にて、回答Bを選択した場合のみ、<input>内に上記文字列を追加して、
最終的に以下のような形として実行する方法をご教示いただければ幸いです。

<input type="text" name="last-name" class="add-validation" data-validetta="required">
<input type="text" name="first-name" class="add-validation" data-validetta="required">

###該当のソースコード

<!-- HTML -->
<input type="radio" name="btn" value="回答A" onclick="btnClick()" checked>回答A
<input type="radio" name="btn" value="回答B" onclick="btnClick()" id="open">回答B
<div id="input-box">
	<input type="text" name="last-name" class="add-validation">
	<input type="text" name="first-name" class="add-validation">
</div>

<!-- CSS -->
<style>
#input-box {
	display: none;
}
</style>

<!-- JS -->
<script>
function btnClick() {
	if (document.getElementById('open').checked) {
		document.getElementById('input-box').style.display = 'block';
	} else {
		document.getElementById('input-box').style.display = 'none';
	}
}
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

ラジオボタンの切り替えに連動して、対象となるinput要素への属性付け外しは以下のコードで出来ます（jQeury使ってよければ、もう少しシンプルなコードになると思います。
ただし、input要素への属性付け外しに連動して、Validattaが連動して動作/停止するかは確認していません。

javascript
1function btnClick() {
2  var forms = document.querySelectorAll('.add-validation');
3  var toggleAttribute = function (addValidation, flag) {
4    Array.prototype.forEach.call(forms, function (form) {
5      if (flag) {
6        form.setAttribute('data-validetta', 'required');
7      } 
8      else {
9        form.removeAttribute('data-validetta');
10      }
11    });
12  };
13  
14  if (document.getElementById('open').checked) {
15    document.getElementById('input-box').style.display = 'block';
16    toggleAttribute(forms, true);
17  } else {
18    document.getElementById('input-box').style.display = 'none';
19    toggleAttribute(forms, false);
20  }
21}