選択ボックスを無効にしたいです

Question

前提・実現したいこと

2つの選択ボックスがあります。
もし、一つの選択ボックスに値が選択されたら
もう一つの選択ボックスを無効にするプログラムを作成しております。

発生している問題・エラーメッセージ

JavaScriptで、どちらかの選択肢を選択した際に
もう一方の選択肢を無効にしたいというソースコードを作成してますが
うまくいきません。disabledで無効にするというところまではわかったのですが、
値が入力されたらというところでつまづいでおります。

該当のソースコード

HTML
<form action="sample-select.php" method="post" target="_blank">
	<p>
		選択肢： 
		<select name="sampleName"　class="name">
			<option value="値Ａ">選択肢Ａ</option>
			<option value="値Ｂ">選択肢Ｂ</option>
			<option value="値Ｃ">選択肢Ｃ</option>
		</select>
	</p>
  	<p>
		選択肢： 
		<select name="sampleName"　class="name">
			<option value="値Ａ">選択肢Ａ</option>
			<option value="値Ｂ">選択肢Ｂ</option>
			<option value="値Ｃ">選択肢Ｃ</option>
		</select>
	</p>
</form>

JavaScript
let value = document.getELementByClassName("name")

if(value){
documet.createElement(disabled);
}

Answer 1

以下のようにidを振ってあげて、

<form action="sample-select.php" method="post" target="_blank">
    <p>
        選択肢： 
        <select name="sampleName" id="name1">
            <option value="値Ａ">選択肢Ａ</option>
            <option value="値Ｂ">選択肢Ｂ</option>
            <option value="値Ｃ">選択肢Ｃ</option>
        </select>
    </p>
      <p>
        選択肢： 
        <select name="sampleName" id="name2">
            <option value="値Ａ">選択肢Ａ</option>
            <option value="値Ｂ">選択肢Ｂ</option>
            <option value="値Ｃ">選択肢Ｃ</option>
        </select>
    </p>
</form>

jqueryを以下のようにするとできると思います。

/* global $*/
$(function($){
    $('#name1').change(function() {
        $("#name2").attr("disabled", "disabled");
    });
    $('#name2').change(function() {
        $("#name1").attr("disabled", "disabled");
    });
});