javascript disabled解除

javascriptを使いname="field1"とname="field2"が入力、選択された場合にname="field3"とname="field4"のdisabledを解除し、入力、選択できるようにしたいです。
submitせずに、field1とfield2の値が''以外の時のchangeイベントを拾う方法をご教授お願いいたします。

以下コードです。

<form method="POST" action="hogehoge">
  <input type="text" name="field1" size="30"> 
 <select name="field2">
  <option value="">-</option>
  <option value="1">1</option>
  <option value="2">2</option>
 </select>
  <input type="text" name="field3" size="30" disabled="disabled"> 
 <select disabled="disabled" name="field4">
  <option value="">-</option>
  <option value="3">3</option>
  <option value="4">5</option>
 </select>
</from>

kei344

2017/05/18 16:12

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<form method="POST" action="">
15    <label>
16        <input type="text" name="field1" size="30">
17    </label>
18    <label>
19        <select name="field2">
20            <option value="">-</option>
21            <option value="1">1</option>
22            <option value="2">2</option>
23        </select>
24    </label>
25    <label>
26        <input type="text" name="field3" size="30" disabled="disabled">
27    </label>
28    <label>
29        <select disabled="disabled" name="field4">
30            <option value="">-</option>
31            <option value="3">3</option>
32            <option value="4">5</option>
33        </select>
34    </label>
35</form>
36<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
37<script>
38    $(function () {
39        $("input[name=field1], select[name=field2]").on("change input", function (e) {
40            if ($("input[name=field1]").val().length && $("select[name=field2]").val().length) {
41                $("input[name=field3], select[name=field4]").prop("disabled", false);
42            } else {
43                $("input[name=field3], select[name=field4]").prop("disabled", true);
44            }
45        });
46    });
47</script>
48</body>
49</html>