javascript чтобы снять флажок

Question

Я новичок в технологиях пользовательского интерфейса. любая подсказка для решения приведенной ниже проблемы будет очень полезна.

Ниже приведен код для моей jsp страницы

<label for="enableLogging"><s:text name="log.enable"/></label>
  <s:checkbox id="enableLogging" name="enableLogging" value="enableLogging" disabled="%{!user.system}"/>
  <div class=title><s:text name="sys.events"/></div>
    <label for="level"><s:text name="level"/> <s:select id="level" name="level" value="level" disabled="${disabled}"/></label>
    <label for="message"><s:text name="message"/> <s:select id="message" name="message" value="message" disabled="${disabled}"/></label>
    <label for="addSeverity"><s:text name="add.severity"/></label>
    <s:checkbox id="addSeverity" name="addSeverity" value="addSeverity" disabled="${disabled}"/>

... ниже приведен javascript, который я добавил для отключения текстовые поля и флажки, основанные на значении enableLogging

    <script type="text/javascript">
  $(function() {

    var $enableLogging = $('#enableLogging');
    var $level = $('#level');
    var $message = $('#message');
    var $addSeverity = $('#addSeverity')

    if (!$enableLogging.prop('checked')) {
      $level.attr('disabled', true);
      $message.attr('disabled', true);
      $addSeverity.attr('disabled', true);
    }

    $enableLogging.change(function() {
      $this = $(this);
      if ($this.prop('checked')) {
        $level.attr('disabled', false);
        $message.attr('disabled', false);
        $addSeverity.attr('disabled', false);
      } else {
        $level.attr('disabled', true);
        $message.attr('disabled', true);
        $addSeverity.attr('disabled', true);
      }
    });
  });
</script>

Я хочу отключить «level», «message» и «addSeverity» на основе значения флажка «enableLogging», но приведенный выше код, похоже, не работать

Answer 1

Я изменил способ, которым я это реализовал,

Javascript теперь:

 var fieldDisabled = $('#enableLogging').is(':checked');

$('#enableLogging').change(function() {
  $this = $(this);
  if ($this.prop('checked')) {
      fieldDisabled = false;
  } else {
      fieldDisabled = true;
  }
});

Добавлен следующий код в jsp:

<label for="enableLogging"><s:text name="log.enable"/></label>
  <s:checkbox id="enableLogging" name="enableLogging" value="enableLogging" disabled="%{!user.system}"/>
  <s:set var="disabled">
    <s:if test="%{!user.system} || fieldDisabled == true">
       disabled="disabled"
    </s:if>
  </s:set>
  <div class=title><s:text name="sys.events"/></div>
    <label for="level"><s:text name="level"/> <s:select id="level" name="level" value="level" disabled="%{#disabled}"/></label>
    <label for="message"><s:text name="message"/> <s:select id="message" name="message" value="message" disabled="%{#disabled}"/></label>
    <label for="addSeverity"><s:text name="add.severity"/></label>
    <s:checkbox id="addSeverity" name="addSeverity" value="addSeverity" disabled="%{#disabled}"/>

Answer 2

Можно попробовать за

$(document).ready(function(){
$("#enableLogging").click(function() {
if($("#enableLogging").prop("checked") == true) {
$("#level").prop('disabled',true);
$("#message").prop('disabled',true);
$("#addSeverity").prop('disabled',true);
}
else {
$("#level").prop('disabled',false);
$("#message").prop('disabled',false);
$("#addSeverity").prop('disabled',false);
}
});
});