Foundation 6 - 滑块输入值？

Question

如果滑块到达终点 (4)，我正在尝试禁用选择下拉菜单。随附的 codepen 示例有效，但仅在您直接更改输入值时有效。它不适用于基础滑块。

有人对我如何让基础滑块发挥出色有任何建议吗？

CODEPEN： example here

HTML：

<div class="row">
    <div class="small-2 columns">Height:</div>
    <div class="small-5 columns">
      <div class="slider" data-slider data-initial-start="3" data-options="precision:3; decimal:3; start:1; end:4; step:1;" style="margin-top: 12px;">
        <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="y"></span>
        <span class="slider-fill" data-slider-fill></span>
      </div>
   </div>
   <div class="small-5 columns">
      <input type="number" step="1" id="y" style="border: 1px solid #999999; display:inline-block; width:39%;">
      <select id="HeightFraction" name="HeightFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
        <option value="" selected="">0</option>
        <option value="1/8">1/8</option>
        <option value="1/4">1/4</option>
        <option value="3/8">3/8</option>
        <option value="1/2">1/2</option>
        <option value="5/8">5/8</option>
        <option value="3/4">3/4</option>
        <option value="7/8">7/8</option>
      </select>
      <span class="small">in.</span>
   </div>
</div>

JQUERY：

$( "#y" ).change(function() {
    if (this.value == "4") {
      $('#HeightFraction').prop('disabled', 'disabled');
    }
    else {
      $('#HeightFraction').prop('disabled', false);
    }
});

Answer 1

您在文档中的moved.zf.slider 事件正常。

问题在于您的 if 语句试图检查滑块的值是否等于 4。您需要使用 .val() 而不是 .value。

完整的sn-p如下：

$(document).foundation();

// Code to disable the select drop down (if) the input value is at 4. The below code only works if adjusting the input directly - does not work if using the slider.
$("#y").change(function() {
  if (this.value == "4") {
    $('#HeightFraction').prop('disabled', true);
  } else {
    $('#HeightFraction').prop('disabled', false);
  }
});



// In the Foundation doc "moved.zf.slider" is supposed to monitor change of the slider but I was not able to hook the value of the input to this to triger the code?
$('.slider').on('moved.zf.slider', function() {
  "use strict";

  if ($("#y").val() == "4") {
    $('#HeightFraction').prop('disabled', true);
  } else {
    $('#HeightFraction').prop('disabled', false);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation-flex.css" rel="stylesheet" />
<br/>
<br/>

<div class="row">
  <div class="small-2 columns">Height:</div>
  <div class="small-5 columns">
    <div class="slider" data-slider data-initial-start="3" data-options="precision:3; decimal:3; start:1; end:4; step:1;" style="margin-top: 12px;">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="y"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="small-5 columns">

    <input type="number" step="1" id="y" style="border: 1px solid #999999; display:inline-block; width:39%;">

    <select id="HeightFraction" name="HeightFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
      <option value="" selected="">0</option>
      <option value="1/8">1/8</option>
      <option value="1/4">1/4</option>
      <option value="3/8">3/8</option>
      <option value="1/2">1/2</option>
      <option value="5/8">5/8</option>
      <option value="3/4">3/4</option>
      <option value="7/8">7/8</option>
    </select>

    <span class="small">in.</span>

  </div>
</div>