Question

我确信之前已经回答过，但我无法找到我需要的东西。下面的jsfiddle是我想要做的基本想法。我希望用户进入页面并禁用文本/选择字段。如果他们选择＆＃39;收音机中的单选按钮。 class，我希望从＆＃39;字段中的所有3个字段中删除disable属性。类。我尝试了不同的onClick事件，似乎无法让它工作，但我不熟悉javascript和jquery。任何人都可以告诉我如何实现这一目标吗？

http://jsfiddle.net/q5jqqgnt/

<input class="radio" name="radio" type="radio">Radio 1
<input class="radio" name="radio" type="radio">Radio 2
<br>Field 1
<input class="fields" disabled="disabled" name="field1" type="text">
<br>Field 2
<input class="fields" disabled="disabled" name="field2" type="text">
<br>Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>

Answer 1

您需要使用jQuery中的.removeAttr()函数删除disabled属性

$('.radio').change(function(){
  $('.fields').removeAttr('disabled');
});

JSfiddle demo

Answer 2

最简单的，我建议使用prop()，而不是removeAttr()：

$('.radio').on('change', function(){
    $('.fields').prop('disabled', false);
});

$('.radio').on('change', function() {
  $('.fields').prop('disabled', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" disabled="disabled" name="field1" type="text" />
<br />Field 2
<input class="fields" disabled="disabled" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
  <option>Test 1</option>
</select>

您可以在兼容的浏览器中使用CSS模拟disabled属性的存在和删除：

.radio ~ input.fields {
  pointer-events: none;
  opacity: 0.4;
  background-color: #ccc;
}
.radio:checked ~ input.fields {
  pointer-events: auto;
  opacity: 1;
  background-color: #fff;
}

<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" name="field1" type="text" />
<br />Field 2
<input class="fields" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
  <option>Test 1</option>
</select>

不幸的是，虽然这可以防止鼠标交互（用户无法通过鼠标点击来聚焦字段），但他们仍然可以使用选项卡按钮来聚焦字段并输入文本，当然，表单元素仍将被视为“成功”（尽管可能具有空值），并且在提交表单时将提交给服务器。

因此，虽然在某些非常具体的情况下可能有用，但几乎肯定不会在大多数情况下使用它。

参考文献：

CSS：
- pointer-events。
jQuery的：
- on()。
- prop()。

选择单选按钮时删除禁用属性

2 个答案: