Question

嗨我想让一个文本框变成灰色，只有勾选一个复选框才能读取。目前我能够将文本框设置为只读但不会变为灰色。我通常会使用disabled属性，但是我仍然需要发送文本框的值，因此这里不能使用disabled属性，因为它返回一个空值。

jQuery(document).ready(function () {
   $("#redflag2").click(function () {
      $('#new_contracted_support_hours').attr("readonly", $(this).is(":checked"));
      $('#new_contracted_support_hours').addclass("greyba", $(this).is(":checked"));
  });
});

CSS

.greyba{
    background-color:rgba(178,178,178,1.00);

}

Answer 1

为什么不能更清楚地分离您的疑虑，让JS为功能和CSS设置样式？当您使用readonly属性时，您的Javascript中需要进行零样式干预。

NB。实施仅供参考

function setState(){
  document.getElementById('field').readOnly = document.getElementById('checkbox').checked;
}
$('#checkbox').on('change', setState); // set state on checkbox change
setState(); // set state on initial load

#field[readonly] {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkbox" type="checkbox" />
<input id="field" type="text" value="value.." />

灰色并使用jquery只读文本框

1 个答案: