禁用或启用选择基于其他选择中选择的值的选项

Question

我创建了2个我希望层叠的选择列表。我的意思是，如果将值x选入第一个选择中，则应禁用第二个选择的值x，y，z等，并启用值w等。

我的以下脚本不起作用。我可以在第一个选择中选择一个值，在第二个选择中禁用或启用正确的值，但是当我再次将值更改为第一个选择时，则在第二个选择中仍禁用或启用相同的值：

import UIKit

class AddTaskViewController: UIViewController {

    @IBOutlet weak var taskTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    //// When Done Button Tapped
    @IBAction func doneButtonTapped(_ sender: Any) {
        let taskName = taskTextField.text

        let context = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext

        **let task = Task(context: context)**

        task.name = taskName
        task.category = taskCategory

        (UIApplication.shared.delegate as! AppDelegate).saveContext()

        dismiss(animated: true, completion: nil)
    }

$('#form').on('change', function() {

  var pl1 = document.getElementById('ordersdetailID_portion').value; // partyloafportionID


  if (pl1 == 1) {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true);

  } else if (pl1 == 2) {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true);

  } else if (pl1 == 3) {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true);

  } else if (pl1 == 4) {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', false);

  }

});

Answer 1

干燥（不要重复自己）

我不是100％肯定我的连击正确，但这是我会使用的方法

无需设置已禁用，我只需在加载时触发更改

$('#ordersdetailID_portion').on('change', function() {
  var pl1 = +this.value, // partyloafportionID
     $weight = $('#ordersdetailpartyloafweightID');
  $('option[value="1"]',$weight).prop('disabled', pl1 != 1);
  $('option[value="2"]',$weight).prop('disabled', pl1 != 2);
  $('option[value="3"]',$weight).prop('disabled', pl1 != 3);
  $('option[value="4"]',$weight).prop('disabled', pl1 != 4 && pl1 != 5);
  $('option[value="5"]',$weight).prop('disabled', pl1 != 4 && pl1 != 5);
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ordersdetailID_portion" name="child-ID_portion" class="form-control select2  select2-hidden-accessible" tabindex="-1" aria-hidden="true" required="">
  <option value="">** Veuillez saisir une option Nombre de sandwiches</option>
  <option value="4">100</option>
  <option value="1">30</option>
  <option value="2">60</option>
  <option value="3">80</option>
</select>

<select id="ordersdetailpartyloafweightID" name="child-partyloafweightID" class="form-control select2  select2-hidden-accessible" tabindex="-1" aria-hidden="true" required="">
  <option value="">** Please choose the appropriate weight</option>
  <option value="2">1 Kg</option>
  <option value="3">1.5 Kg</option>
  <option value="4">2 Kg</option>
  <option value="5">2.5 Kg</option>
  <option value="1">600 g</option>
</select>

Answer 2

您的代码document.getElementById('ordersdetailID_portion').value;返回一个string，但是您正在检查数字。

此外，每次更改时，您都必须首先将所有选项的disabled重置为false。检查下面的代码：

$('form').on('change', function() {
  $('#ordersdetailpartyloafweightID option').prop('disabled', false);
  var pl1 = document.getElementById('ordersdetailID_portion').value; // partyloafportionID

  if (pl1 == "1") {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true);

  } else if (pl1 == "2") {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true);

  } else if (pl1 == "3") {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true);

  } else if (pl1 == "4") {

    console.log('ID_portion:', pl1);
    $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true);
    $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', false);
    $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', false);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select id="ordersdetailID_portion" name="child-ID_portion" class="form-control select2  select2-hidden-accessible" tabindex="-1" aria-hidden="true" required="">
    <option value="">** Veuillez saisir une option Nombre de sandwiches</option>
    <option value="4">100</option>
    <option value="1">30</option>
    <option value="2">60</option>
    <option value="3">80</option>
  </select>

  <select id="ordersdetailpartyloafweightID" name="child-partyloafweightID" class="form-control select2  select2-hidden-accessible" tabindex="-1" aria-hidden="true" required="">
    <option value="">** Please choose the appropriate weight</option>
    <option value="2">1 Kg</option>
    <option value="3">1.5 Kg</option>
    <option value="4">2 Kg</option>
    <option value="5">2.5 Kg</option>
    <option value="1">600 g</option>
  </select>
</form>