HTML Selectが空の場合にSubmitボタンを無効にする

Question

私はプログラマーになる予定で、現在仕事中のプロジェクトを担当しています。

私の問題はこれです：私は3つの送信ボタン（同じフォーム上）、それぞれ別のアクションを呼び出しています。 HTML Selector（ドロップダウン）に選択肢がない場合、これらのボタンはを無効にする必要があります。

私のフォームは現在、次のようになります。任意の助け

 <form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;"> 
     <div class="col-md-9"> 

      <div class="form-group form-inline"> 
       <label asp-for="OrderNumber">Order number: </label> 
       <input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus /> 
      </div> 

      <div> 
       <label>Delete</label> 
       <input asp-for="Deletion" type="checkbox" /> 
      </div> 

      <div> 
       <div class="col-md-4"> 
        <input class="btn btn-block" type="submit" name="action" value="Receive" /> 
       </div> 
       <div class="col-md-4"> 
        <input class="btn btn-block" type="submit" name="action" value="Start" /> 
       </div> 
       <div class="col-md-4"> 
        <input class="btn btn-block" type="submit" name="action" value="Finish" /> 
       </div> 
      </div> 
     </div> 

     <div class="col-md-3"> 
      <div class="form-group form-inline"> 
       <label asp-for="ProfileId">Profile: </label> 
       <select asp-for="ProfileId" class="form-control"> 
        @foreach (var p in Model.Profiles) 
        { 
         <option value="@p.ProfileId">@p.Name</option> 
        } 
       </select> 
      </div> 
     </div> 
    </form> 

おかげで、あなたはより多くの情報が必要か、この質問が不十分で説明されている場合、お気軽にお問い合わせない場合は！ :)

Answer 1

私はRazorを使用して私自身の解決策を考え出しました。

私のフォームは次のようになります。

 <form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;"> 
     <div class="col-md-9"> 
      <div class="form-group form-inline"> 
       <label asp-for="OrderNumber">Order number: </label> 
       <input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus /> 
      </div> 
      <div> 
       <label>Delete</label> 
       <input asp-for="Deletion" type="checkbox" /> 
      </div> 
      <div> 
       <div class="col-md-4"> 
        <input class="btn btn-block" type="submit" name="action" value="Receive" 
          @{ if (Model.Profiles.Count() == 0) { @: disabled="disabled" 
                         } } /> 
       </div> 
       <div class="col-md-4"> 
        <input class="btn btn-block" type="submit" name="action" value="Start" 
          @{ if (Model.Profiles.Count() == 0) { @: disabled="disabled" 
                         } } /> 
       </div> 
       <div class="col-md-4"> 
        <input class="btn btn-block" type="submit" name="action" value="Finish" 
          @{ if (Model.Profiles.Count() == 0) { @: disabled="disabled" 
                         } } /> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="form-group form-inline"> 
       <label asp-for="ProfileId">Profile: </label> 
       <select asp-for="ProfileId" class="form-control"> 
        @foreach (var p in Model.Profiles) 
        { 
         <option value="@p.ProfileId">@p.Name</option> 
        } 
       </select> 
      </div> 
     </div> 
    </form> 

が、私はプロファイルの私のリストのいずれかのプロファイルがあるかどうかを確認するif文を追加しました。何もない（0）場合は、入力に disabled = "disabled"属性を追加します。

これを解決するには、私を支援するためにしようとした人に感謝し、解決のための提案を私に提供:)

Answer 2

ボタンにIDを指定します。それらを無効にする（enabled = "false"）。

ドロップダウンリストが変更されたときにjavascript関数を呼び出します。

onchangeと呼ばれる関数のドロップダウンリストのselectedIndexをチェックし、それに応じてボタンを設定します。

私はそれを行う関数を書くことができますが、何も学ばないでしょう。もしあなたが少しの研究をして、関数を書くのに刺すようなことがあれば、それがうまくいかない場合は修正します。

Answer 3

他の条件条件が同じであるかどうかに応じて必要なフォームフィールドを無効にするだけです。あなたはそれらにカスタムクラスを与え、いくつかのJavaScriptコードを使用してJSを使ってクラスを切り替えることができます。

toggleAttribute = function(className,index){ 
     var eLs = [].slice.call(document.getElementsByClassName(className),0); 
     for(var i=0; i<eLs.length; i++){ 
     eLs[i].disabled=(index==0 ? false : true); //index 0 is for 'Yes' 
     } 
}