Question

我有一个切换复选框和2个输入字段。我想要实现的是在未选中复选框时禁用输入字段，反之亦然。这是我的代码。

<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox">
      <label>A4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="gray" value="1.00" placeholder="0.00" type="text">
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text">
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>

和javascript

$('.ui.checkbox').checkbox();

我已经研究过使用附加事件等复选框的行为或使用回调，但我不知道如何正确使用它们。 I've also tried implementing this但我认为.next()并不符合我的问题。我尝试过尝试和研究，但我似乎无法找到解决方案。

Answer 1

使用您提供的链接，我想出了这个解决方案。

$('#a4').change(function(){
  $('input[name=gray]').attr('disabled',!this.checked);
  $('input[name=colored]').attr('disabled',!this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" checked>
      <label>A4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="gray" value="1.00" placeholder="0.00" type="text">
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text">
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>

现在，您可能希望在文本输入上设置一些ID，这样您就不必使用input[name=gray]。我个人更喜欢ID这种语法。

编辑：

在复选框中添加了checked属性以反映OP需求。

Answer 2

使用on功能和参数＆＃34;更改＆＃34;要在复选框中添加事件监听器，然后在回调部分内部使用输入选择器按名称＆＃39; grey＆＃39;所以将disabled属性设置为复选框的选中状态的倒数。

如果要对包含多个项目的表单中的所有复选框执行此操作，只要它们遵循相同的基本模板设计，您就可以同时使用parent()和find()来查找输入元素在某个父元素中的某种类型。

＆＃13;

$("input[type='checkbox']").on("change", function() {
  $(this).parent().parent().parent().find("input[type='text']").prop("disabled", !this.checked);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" />
      <label>A4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="gray" value="1.00" placeholder="0.00" type="text" disabled="true">
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>


<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" />
      <label>C4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="gray" value="1.00" placeholder="0.00" type="text" disabled="true">
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>

<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" />
      <label>B4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="gray" value="1.00" placeholder="0.00" type="text" disabled="true">
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

应在第一个实例中禁用输入。然后在选中此框时启用。

＆＃13;

$('#a4').change(function(){
  $('#gray').attr('disabled',!this.checked);
  $('#colored').attr('disabled',!this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox">
      <label>A4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input id="gray" name="gray" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input id="colored" name="colored" value="1.00" placeholder="0.00" type="text" disabled>
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>

＆＃13;

当复选框切换时，语义ui禁用输入字段

3 个答案: