Question

当旅行类型为一种方式时，我试图禁用返回日期的输入字段。当我以一种方式检查单选按钮时，返回日期仍处于启用状态。请帮我我在这里想念的东西。预先感谢。

<label>
    <input type="radio" name="travel_type"value=""class="with-gap" 
    id="one_way">
    <span style="color:white;">One Way</span>
</label>
<label>
    <input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
    <span style="color: white;">Round Trip</span>   
</label>

var button = document.getElementById('one_way');
if (document.getElementById('one_way').checked) {
   document.getElementById('datepicker1').disabled = true;
}

Answer 1

如果您将使用jQuery，这将很容易。我使用Jquery创建了此示例。希望对您有帮助。

$("input[name='travel_type']").click(function(){
  if($(this).is(':checked') && $(this).val()=='1'){
      $('#datepicker1').attr('disabled','disabled');
  }else{
   $('#datepicker1').removeAttr('disabled');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>  One Way  
<input type="radio"  name="travel_type" value="1" class="with-gap" ></label>
<label>Round Trip
<input  type="radio" name="travel_type" value="2" class="with-gap" ></label>
<p><label>Date Picker <input type="date" name="datepicker" id="datepicker1"></label></p>

Answer 2

您必须将事件绑定到单选按钮，这是您的工作代码，

var button = document.getElementById('one_way');
var button2 = document.getElementById('round_trip');
button.addEventListener('change', function() {
    if (document.getElementById('one_way').checked) {
    document.getElementById('datepicker1').disabled = true;
  }
})

button2.addEventListener('change', function() {
    if (!document.getElementById('one_way').checked) {
    document.getElementById('datepicker1').disabled = false;
  }
})

您也可以在JSFiddle Code

上进行检查

Answer 3

尝试一下。它必须工作！使用jQuery click事件代替Java

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
<body>
    <input type="text" class="form-control" id="datepicker1" />
    <label>
        <input type="radio" name="travel_type" value="1"class="with-gap travel_type" 
        id="one_way">
        <span style="color:red;">One Way</span>
    </label>
    <label>
        <input type="radio" name="travel_type" value="2"class="with-gap travel_type"id="round_trip">
        <span style="color: red;">Round Trip</span>   
    </label>
    </body>
    </html>
<script>
$(".travel_type").click(function(){
    if($(this).val() == 1)
  {
    $("#datepicker1").prop('disabled', true); 
  }else{
    $("#datepicker1").prop('disabled', false);
  }
}); 
</script>

Answer 4

我认为您在单击单选按钮时忘记了调用“功能”。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<label>
    <input type="radio" name="travel_type"value=""class="with-gap" 
    id="one_way" onclick="functionRadioChecked();">
    <span style="color:red;">One Way</span>
</label>
<label>
    <input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
    <span style="color: red;">Round Trip</span>   
</label>

<br><br><br>
<input type="date" id="datepicker1">

<script>
function functionRadioChecked() {
    var button = document.getElementById('one_way');
    if (document.getElementById('one_way').checked) {
        document.getElementById('datepicker1').disabled = true;
    }
}

</script>

</body>
</html>

Answer 5

尝试此代码块，该代码块在文档加载时具有自动执行功能

    <html>
        <label>
            <input type="radio" name="travel_type"value=""class="with-gap" 
            id="one_way">
            <span style="color:black;">One Way</span>
        </label>
        <label>
            <input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
            <span style="color: black;">Round Trip</span>   
        </label>
        <script>
        (function() {
           var button1 = document.getElementById('one_way');
           button1.onclick = function()
           {            
           document.getElementById('datepicker1').disabled = true;
           }
           var button2 = document.getElementById('round_trip');
           button2.onclick = function()
           { 
           document.getElementById('datepicker1').disabled = false;
           }     
        })();
        </script>
    </html>

您还可以为单选按钮onclick分配单独的功能但是根据您提交的代码，我建议上面的代码祝你好运

我无法禁用输入字段

5 个答案: