如何通过比较其他三个选择选项的值来禁用一个选择选项的值？

时间：2018-08-28 19:30:53

标签： javascript jquery frontend

我有四个选择选项字段。通过评估三个选择选项的值，需要为用户禁用第四个选择选项字段中的某些选项字段。

第一个选择选项类似于

<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
</select>

第二个选择选项如下-

<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>

第三个选择选项如下

<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>

通过比较三个选择字段上方的值，需要禁用以下选择中的某些选项字段。 规则是：

规则1）如果床型是单人，那么一个成年人只能使用一个房间，但成年人和儿童的总数可以是两个，依此类推。

规则2）如果床型是双人的，那么一个成年人只能使用两个房间，但成年人和儿童的总数可以是三个，依此类推。

在这里我需要帮助来禁用最后一个选择的选项字段，该选项的值低于所需房间数的最小值。

<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

我通过以下方法尝试过，但这是不对的，而且没有用。

$(document).ready(function(){
   $(".xyz").change(function () {
         var adults = $("#vadults").val();
         var childs = $("#vchilds").val();
         var beds = $("#vbeds").val();
         var rooms = $("#vrooms").val();
         if(beds == 1){
            if(childs == 0){
               if(adults ==1){
                        }
               if(adults == 2){
                  $("#vrooms option[value="1"]").attr('disabled');
                  $("#vrooms option[value="2"]").removeAttr('disabled');
                  $("#vrooms option[value="3"]").removeAttr('disabled');
               }
               if(adults == 3){
                  $("#vrooms option[value="1"]").attr('disabled');
                   $("#vrooms option[value="2"]").attr('disabled');
                   $("#vrooms option[value="3"]").removeAttr('disabled');
                }
            }
         }
    });
 });

4 个答案:

答案 0 :(得分：2)

您没有正确设置disabled属性。

您的代码只是尝试 获取 disabled属性的值。

$("#vrooms option[value="1"]").attr('disabled');  // <-- Only "gets" the disabled attribute value

此外，您的原始代码在JQuery选择器中存在一些错误，因为您在双引号中嵌套了双引号。 

$("#vrooms option[value="1"]")  // <-- Can't nest double quotes inside of double quotes

您需要在双打中使用单引号。

最后，JQuery在一段时间前不赞成使用快捷方式事件方法（即.change()）。现在，他们建议使用.on()方法进行事件绑定。

这是您要执行的操作的简化示例：

$(function(){
   // Use the .on() method to do event binding
   $("select").on("change", function () {
      let response = prompt("Enter 1 or 2");
      if(response === "1"){
        // To set a value, you have to pass two arguments
        // 1. The attribute you want to set
        // 2. The value you want to set
        $("#vrooms option[value='1']").attr('disabled', 'disabled');
        $("#vrooms option[value='2']").removeAttr('disabled');
        $("#vrooms option[value='3']").removeAttr('disabled');
       } else {
        $("#vrooms option[value='1']").attr('disabled', 'disabled');
        $("#vrooms option[value='2']").attr('disabled', 'disabled');
        $("#vrooms option[value='3']").removeAttr('disabled');
       }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

答案 1 :(得分：1)

以下是我根据您的要求执行的一些代码：

$(document).ready(function(){
   $(".xyz").change(function () {
         var adults = $("#vadults").val();
         var childs = $("#vchilds").val();
         var beds = $("#vbeds").val();
         var rooms = $("#vrooms").val();
         
         if (beds == 1) { //if user picked single bed (Rule #1)
         	//alert("1");
          $("#vadults option").each(function() { //for each option in adult dropdown
          	if ($(this).index() > 0) { //if it's not the first default choice
              if ($(this).val() > 1) { //any adult greater than 1
                $(this).attr('disabled', 'disabled'); //disable (hide them)
              }
            }
          });
         }
         else { //if user picked double bed (Rule #2)
         	$("#vadults option").each(function() { //for each option in adult
            $(this).removeAttr('disabled'); //remove the disabled attr
          });
          $("#vadults option").each(function() { //for each option in adult dropdown
          	if ($(this).index() > 0) { //if it's not the first default choice
              if ($(this).val() > 2) { //any adult greater than 2
                $(this).attr('disabled', 'disabled'); //disable (hide them)
              }
            }
          });
         }
         if(beds == 1){
            if(childs == 0){
               if(adults ==1){
                        }
               if(adults == 2){
                  $("#vrooms option[value='1']").attr('disabled');
                  $("#vrooms option[value='2']").removeAttr('disabled');
                  $("#vrooms option[value='3']").removeAttr('disabled');
               }
               if(adults == 3){
                  $("#vrooms option[value='1']").attr('disabled');
                   $("#vrooms option[value='2']").attr('disabled');
                   $("#vrooms option[value='3']").removeAttr('disabled');
                }
            }
         }
    });
 });
select option[disabled] {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
</select>
<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>
<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>
<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

当然，这只是处理换床要求。因此，您将不得不合并其他下拉菜单更改并保持跟踪以更新其他下拉菜单。

我还使用CSS代码片段隐藏了在小提琴中可以看到的禁用选项。

不是最有效的方法，但这是使您朝正确的方向前进。

答案 2 :(得分：1)

我只想感谢大家分享您的知识。最后，我能够完成这项任务，并希望与大家分享。

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="topBar">
  <span>Code Player</span>
  <div class="topButtons">
    <button id="html">HTML</button>
    <button id="css">CSS</button>
    <button id="javascript">JavaScript</button>
    <button id="output">Output</button>
  </div>
</div>

如果你们想在JSFiddle上检查一下 检查一下JSFiddle for this task

答案 3 :(得分：-1)

代码$("#vrooms option[value="1"]").attr('disabled');仅检索$('#vrooms option[value="1"]')元素的Disabled属性的值；尝试

$('#vrooms option[value="1"]').prop('disabled', true);

--------------------------更新-------------------- ------

由于Scott的评论，我添加了代码：

$('#vrooms option[value="1"]').attr('disabled', 'disabled');

仍然有效。

--------------------------更新-------------------- ------

禁用该选项和

$('#vrooms option[value="1"]').prop('disabled', false);

启用该选项。但是，我认为您的方法不是解决问题的正确方法。您宁可删除用户无法再选择的选项。

--------------------------更新-------------------- ------

我认为Scott处理.prop()的方法是合法的，因此我按照这种方式更新了代码。

相关问题
最新问题