Question

我正在编写一个python flask服务器来控制我正在处理的项目。

我发现了bootstrap-fullscreen-select，这正是我要用作控制页面的内容，我需要根据单选按钮结果禁用其中一个元素，但是我尝试的每个js命令都可以无法选择禁用。

我附上了我当前的简化测试代码，如果有人可以提供任何建议，我将不胜感激，（我是初学者，请保持温柔）

<form id="row1Radio" action="">
<p>Single or Dual Display:</p>
  <input type="radio" name="r1_disp" value="1"> Single
  <input type="radio" name="r1_disp" value="2"> Dual
</form>

<div class="panel panel-primary">
  <div class="panel-heading">Right Display</div>
  <div class="panel-body">

    <select id="sel1" class="mobileSelect" name="abc" method="GET"         action="/">
    {% for colour in colours %}
        <option value= "{{colour}}" SELECTED>{{colour}}</option>"
        {% endfor %}
</select>

  </div>
</div>

$('input[name=r1_disp]').change(function(){
    if (this.value == 1) {
        // alert("TRUE");
        $('#sel1').attr('disabled', true);
        $('#sel1').mobileSelect('refresh');
    } else {
        // alert("FALSE");
        $('#sel1').attr('disabled', false);
        $('#sel1').mobileSelect('refresh');
    }
})

Answer 1

我对您的代码进行了一些微调，以使您知道如何执行操作
试试这个代码，它将起作用

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="myForm" action="">
        <p>Single or Dual Display:</p>
          <input type="radio" name="r1" id="r1" value="1" onchange="myFunction()"> Single
          <input type="radio" name="r1" id="r2" value="2" onchange="myFunction2()"> Dual
    </form>    
    <div class="panel panel-primary">
      <div class="panel-heading">Right Display</div>
        <div class="panel-body">    
          <select id="sel1" class="mobileSelect" name="abc" method="GET"  action="/">
            {% for colour in colours %}
            <option value= "{{colour}}" SELECTED>{{colour}}</option>"
            {% endfor %}
          </select>
      </div>
    </div> 
    <script>
      function myFunction() {
        var x = document.getElementById("r1").value;
        if (x==1) {
          document.getElementById("sel1").disabled = true;
        }
      }
      function myFunction2() {
        var x = document.getElementById("r2").value;
        if (x==2) {
          document.getElementById("sel1").disabled = false;
        }
      }

    </script>          
</body>
</html>

尝试使用JS禁用bootstrap-fullscreen-select

1 个答案: