Question

我实际上有两个问题。

问题1：

当我选择具有值all的选项时，输入文本应禁用，否则不应禁用此处是我的编码...

<input type="text" name="store" class="form-control" value="{{$search}}" placeholder="Enter Store name, email or username. Don't forget to pick respective filter" id="store-text" />
<select class="form-control" name="filter" id="search-filters" required>
        <option value="all">All Stores</option>
        <option value="name">By Name</option>
        <option value="email">By Email</option>
        <option value="username">By Username</option>
      </select>

和jquery部分：

$("#search-filters").change(function()
{
var filter_val = this.val();
if(filter_val == "all")
{
  $("#store-text").attr("disabled", "disabled");
}
else
{
  $("#store-text").removeAttr('disabled');
}
});

这在控制台中没有任何错误都不起作用。

问题2：

我从url获取参数值让我们说www.abc.com?filter=all 无论过滤器值是什么，它都应该在选择框中过滤其相应的选项，并将其标记为selected

var filter = getParameter('filter');
 if(filter != "")
 {
    $("#store-text").find('option[value='+filter+']').attr('selected');
 }

我正在获取参数，但我的代码并未选择该选项。

我正在使用jquery.min-3.1.1.js

Answer 1

问题1：

您需要创建一个jQuery对象来使用jQuery方法，即.val()和.prop()应该用于获取/设置属性。

$("#search-filters").change(function() {
    $("#store-text").prop("disabled", $(this).val() == 'all');
});

＆＃13;

$(function() {
  $("#search-filters").change(function() {
    $("#store-text").prop("disabled", $(this).val() == 'all');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Enter Store name, email or username. Don't forget to pick respective filter" id="store-text" />
<select class="form-control" name="filter" id="search-filters" required>
  <option value="all">All Stores</option>
  <option value="name">By Name</option>
  <option value="email">By Email</option>
  <option value="username">By Username</option>
</select>

＆＃13;

问题2：

store-text是输入元素，它没有option个子元素。我想您打算设置select元素值，因此请使用正确的选择器，只需使用.val()方法设置所选选项，并使用.trigger()事件处理程序设置{{1} } disabled

的状态

input

Answer 2

问题1

您错过了使用<div class="col-sm-6 col-md-4 col-lg-4 RESIDENTIAL"> <div class="portfolio-item"> <div class="hover-bg"> <a href="img/portfolio/01-large.jpg" title="Project Title" data-lightbox-gallery="gallery1"> <div class="hover-text"> <h4>Project Name</h4> </div> <img src="~/img/portfolio/01-small.jpg" class="img-responsive" alt="Project Title"> </a> </div> </div> </div>包裹this。这样，您就可以访问$函数，该函数是jQuery对象的函数。否则你无法访问任何方法，因为它没有在此定义。

＆＃13;

val

＆＃13;

$(function(){

  $("#search-filters").change(function(){
    var filter_val = $(this).val();
    if(filter_val == "all"){
      $("#store-text").attr("disabled", "disabled");
    }
    else{
      $("#store-text").removeAttr('disabled');
    }
  });
  
});

＆＃13;

Problem2

如果要设置选择列表选项的选定值，可以尝试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="store" class="form-control" value="{{$search}}" placeholder="Enter Store name, email or username. Don't forget to pick respective filter" id="store-text" />
<select class="form-control" name="filter" id="search-filters" required>
        <option value="all">All Stores</option>
        <option value="name">By Name</option>
        <option value="email">By Email</option>
        <option value="username">By Username</option>
      </select>

Answer 3

使用$(this)代替this。并在document.load时启动该功能。它将检查选项值。

＆＃13;

$("#search-filters").change(function () {
  var filter_val = $(this).val();
  if (filter_val == "all") {
    $("#store-text").attr("disabled", "disabled");
  } else {
    $("#store-text").removeAttr('disabled');
  }
});
$("#search-filters").change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="store" class="form-control" value="{{$search}}" placeholder="Enter Store name, email or username. Don't forget to pick respective filter" id="store-text" />
<select class="form-control" name="filter" id="search-filters" required>
  <option value="all">All Stores</option>
  <option value="name">By Name</option>
  <option value="email">By Email</option>
  <option value="username">By Username</option>
</select>

＆＃13;

Answer 4

正确用法为this.value或$(this).val()。

$("#search-filters").change(function() {
  var filter_val = this.value;
  if (filter_val == "all") {
    $("#store-text").attr("disabled", true);
  } else {
    $("#store-text").attr("disabled", false);
  }
}).change();

在这里演示：https://jsfiddle.net/1wusmusL/1/

问题2：使用

设置所选值

$("#search-filters").val(filter);

在这里演示：https://jsfiddle.net/1wusmusL/2/

Answer 5

问题1解决方案： 我认为你没有绑定 $（document）.ready 中的更改事件，所以你没有得到点击事件与选择的更改挂钩。你的代码很好。但这样做会解决你的问题我希望。请参阅此链接here

$(document).ready(function() {
  $('#search-filters').on('change', function() { 
    if(this.value == 'all'){
      $("#store-text").attr("disabled", "disabled");
    }else{
        $("#store-text").removeAttr('disabled');
    }
  }); 
});

问题2解决方案：

 $("#store-text").val("YOUR VALUE");

希望它有所帮助!!

文本框不会在jquery中选择更改时禁用

5 个答案: