Question

请注意，我已提到this answer，我的解决方案目前正在使用该方法。

这是我的HTML：

<head>
<script>

document.getElementById('average_price').onchange = function() {
    document.getElementById('average_price_symbol').disabled = !this.checked;

};

</script>
</head>

<center>
<form action="/custom" method="POST">
    <h2>Generate Custom Report</h2>
        <br>

        <input type="checkbox" id="average_price" name="average_price"> <b>Average Price</b>
        <br>
        <input type="text" id="average_price_symbol" name="average_price_symbol" placeholder="symbol" disabled>
        <br>

        <input type="submit" value="RUN">
</form>

</center>

加载表单时，文本字段被禁用，但复选框不会更改字段的状态。我不确定出了什么问题。

Answer 1

您的脚本在HTML加载之前执行，因此无法找到任何内容：

<div class="inputs"></div>
<button type="button" id="new">NEW</button><br><br>
Total:<input id="total" type="text" readonly>
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
  $("#new").click(function(){
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calculate("+index+")'> X <input id='mm_"+index+"' onkeyup='calculate("+index+")'> = <input id='result_"+index+"' readonly></div>";
   $(".inputs").append(add);
  });
  
  function calculate(idx){
   $("#result_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());
   $("#total").val(Number($("#total").val()) + Number($("#result_" + idx).val()));
  }
 </script>

将脚本移动到页面底部，传统上只在document.getElementById('average_price')标记内。

Answer 2

以编程方式禁用输入

提醒：始终将您的脚本放在结束体标记

之前

HTML

<h2>Generate Custom Report</h2>
  <br>
  <input type="checkbox" id="average_price" name="average_price"> <b>Average Price</b>
  <br>
  <input type="text" id="average_price_symbol" name="average_price_symbol" placeholder="symbol" >
  <br>
  <input type="submit" value="RUN">

JS

var checkbox = document.getElementById('average_price');
var input = document.getElementById('average_price_symbol');

input.disabled = true;
checkbox.addEventListener('change', function (e) {
  console.log('CHECKED', this.checked);
  input.disabled = !this.checked;
  (!input.disabled && input.focus());
});

Answer 3

将代码添加到文档就绪功能将有所帮助。

$('document').ready(function(){ document.getElementById('average_price') });

根据复选框活动启用/禁用输入

3 个答案: