Блог

Главная - Вопросы по программированию - Переключатель автоматической проверки в jQuery (отметьте переключатель как отмеченный / непроверенный на основе другого значения)

Переключатель автоматической проверки в jQuery (отметьте переключатель как отмеченный / непроверенный на основе другого значения)

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Основываясь на определенном значении в модели из выпадающего списка, я хотел потенциально «Автоматически проверять» переключатель.

В принципе, если бы мы уже знали эту информацию из другого места в системе, я бы просто отметил ответ как «Да».

Но я получаю действительно странную графическую ошибку, код работает только один раз. Последующие вызовы не будут «проверять» переключатель:

 function brokenAutoCheck() {
  if (HasDescription) {



    $('input[name=AttachedJobDescription][value=True]').attr('checked', true);
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true);

  } else {

    $('input[name=AttachedJobDescription][value=True]').attr('checked', null);
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null);

  }
  HasDescription = !HasDescription;

}
var HasDescription = true;  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Yes
<input data-val="true" data-val-required="The Attached Job Description field is required." id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="True">No
<input id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="False">




<br>
<button type="button" onclick="brokenAutoCheck()">Work Once AutoCheck</button>

Примечание: интересно, что если вы установите версию jQuery 1.3.1, это сработает!

Ответ №1:

Какую версию jquery вы используете, которая не 1.3.1?

Начиная с jQuery 1.6, рекомендуется использовать .prop() вместо .attr().

 $(" selector ").prop("checked", true);

Комментарии:

1. правильно, как упоминалось выше, решением было использовать prop, но с интересными оговорками 🙂

Ответ №2:

Я думаю, вам следует просто сделать AttachedJobDescription флажок, а не переключатель.

Переключатели должны использоваться как группа других переключателей, имеющих то же имя, для выбора одного из нескольких значений. Смотрите https://www.nngroup.com/articles/checkboxes-vs-radio-buttons

Комментарии:

1. В этом случае я корректировал html, сгенерированный Razer, что, как я нахожу, часто является интересной задачей 🙂

Ответ №3:

Это определенно одна из тех странных маленьких проблем, которые могут работать с немного разными версиями Jquery и немного другим синтаксисом.

Следующий код показывает, что теперь работает у меня, и соответствующую нерабочую версию (которая работает в Jquery 1.3.1):

 function autoCheck() {
  if (HasDescription) {
    $('input[name=AttachedJobDescription][value=True]').prop('checked', true);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true);

  } else {
    $('input[name=AttachedJobDescription]').prop('checked', false);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null);

  }
  HasDescription = !HasDescription;

}



function brokenAutoCheck() {
  if (HasDescription) {



    $('input[name=AttachedJobDescription][value=True]').attr('checked', true);
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true);

  } else {

    $('input[name=AttachedJobDescription][value=True]').attr('checked', null);
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null);

    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null);
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null);

  }
  HasDescription = !HasDescription;

}
var HasDescription = true;  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Yes
<input data-val="true" data-val-required="The Attached Job Description field is required." id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="True">No
<input id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="False">



<br>
<button type="button" onclick="autoCheck()">AutoCheck (Works)</button>
<br>
<br>
<button type="button" onclick="brokenAutoCheck()">AutoCheck (Work Once )</button>
<br>

Теперь, если вы прочитаете документацию Jquery по attr, там действительно есть специальное упоминание о checked:

«Атрибуты в сравнении со свойствами

Разница между атрибутами и свойствами может быть важна в конкретных ситуациях. До jQuery 1.6 метод .attr() иногда учитывал значения свойств при извлечении некоторых атрибутов, что могло вызвать непоследовательное поведение. Начиная с jQuery 1.6, метод .prop() предоставляет способ явного извлечения значений свойств, в то время как .attr() извлекает атрибуты.

Например, SelectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected должны быть извлечены и установлены с помощью метода .prop(). До jQuery 1.6 эти свойства можно было получить с помощью метода .attr(), но это не входило в сферу действия attr. Они не имеют соответствующих атрибутов и являются только свойствами.»

Это то, что привело меня к попытке «prop», но опять же, поведение prop, похоже, отличается в разных версиях, в нашем коде, который является 1.8.24 (в приложении MVC 4.0), простая замена «attr» на «prop» не сработала, однако, похоже, что это работает в этом фрагменте … безумие! В нашей версии нам пришлось удалить редактирование переключателя «нет», чтобы заставить его работать.

Я думаю, это сводится к тому, что в HTML-среде отмеченный переключатель имеет атрибут «checked», а когда он не отмечен, у него просто нет этого атрибута (в приложении к распознаванию, является ли это true / false).

Таким образом, Jquery должен удалять атрибут, когда для него устанавливается значение, отличное от true, и установка для него значения «true» должна добавить его обратно, и где-то по ходу строки должно быть изменено поведение «attr», чтобы не «добавлять» атрибут … после его удаления. По крайней мере, jQuery, похоже, немного изменил способ обработки этого, особенно после 1.6 и, возможно, некоторые настройки, чтобы быть более последовательными в поведении с тех пор.

Надеюсь, это будет полезно для всех, кто еще развлекается с Jquery и переключателями