ページのロード時にドロップダウンリストを無効にし、HTML内のボタンクリックイベントで有効にしたい場合

Question

ページロード時にドロップダウンリストを無効にし、JQueryを使用してボタンクリックイベントで有効にしたいとします。私は以下のコードを試しましたが、動作しません。何が起こっているのは、ページのロード時にリストを無効にしてから、ボタンのクリックイベントを1秒間有効にしてから再びリストを無効にすることです。

$(document).ready(function() { 
debugger; 
if (jQuery('#btnViewHistoricData').data('clicked')) { 
$("#ddlBranch").prop("disabled", false); 
} else { 
$("#ddlBranch").prop("disabled", true); 
} 
}); 

<div class="text-center"> 
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button> 
</div> 

<div class="col-md-3"> 
<div class="form-group m-r-sm"> 
<label for='rf_name'>Branch</label> 
<select id="ddlBranch" class="m-b-sm w-lg form-control" onchange="ViewHistoricData()"> 
<option value="ALL" selected="selected">ALL</option> 
</select> 
</div> 

Answer 1

あなたがリロードする文書と無効に設定するドロップダウンリストを引き起こし、フォームポストを行いますボタンをクリックしてください。

だから、ボタンがクリックされたときにDropDownListコントロールを有効にすることができるように、ボタン

<button id="btnViewHistoricData" class="btn bg-dark" type="button">View Historic Data</button> 

今すぐno形式ポストは存在しません=タイプのボタンを作ります。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#ddlBranch").prop("disabled", "disabled"); 

     $("#btnViewHistoricData").click(function() { 
      $("#ddlBranch").removeAttr("disabled"); 
     }); 
    }); 
</script> 

Answer 2

このコードを試してみてください。

$(document).ready(function() { 
 

 
$("#btnViewHistoricData").click(function(){ 
 
    $("#ddlBranch").removeAttr("disabled"); 
 

 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text-center"> 
 
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button> 
 
</div> 
 

 
<div class="col-md-3"> 
 
<div class="form-group m-r-sm"> 
 
<label for='rf_name'>Branch</label> 
 
<select id="ddlBranch" class="m-b-sm w-lg form-control" onchange="ViewHistoricData()" disabled="disabled"> 
 
<option value="ALL" selected="selected">ALL</option> 
 
</select> 
 
</div>

Answer 3

$(document).ready(function() { 
debugger; 
if (jQuery('#btnViewHistoricData').on('clicked')) { // Use `on` instead 
$("#ddlBranch").prop("disabled", false); 
} else { 
$("#ddlBranch").removeAttr("disabled"); 
} 
});