Предотвращение выхода одиночных кавычек при использовании laravelcollective/html в формах с шаблоном лезвия

Question

Описание проблемы: Я столкнулся с некоторой проблемой при использовании laravel escape-котировок при использовании компонента laravelcollective/html. Мне нужно, чтобы кавычки оставались незащищенными, чтобы сохранить код javascript.

Puropose of code: Пользователь должен указать, когда он хочет оставить поле формы пустым. Если они этого не делают, требуется некоторый ввод. Я не хочу, чтобы пользователь указывал, что поле пустое и что он подает некоторый ввод одновременно. Это поведение контролируется javascript, удаляя флажок установленного флажка при нажатии переключателя и наоборот.

В форме есть несколько полей (каждый с переключателями и флажок, если поле должно быть пустым). Перед отправкой формы все должны быть проверены javascript. Каждое поле имеет свое имя.

Кода лезвия для поля:

<div> 
    {!! Form::checkbox('field_empty',1,null, ['id' => 'field_empty'] !!} 
</div> 
<div> 
    {!! Form::radio('field', 0, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!} 
    {!! Form::radio('field', 1, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!} 
    {!! Form::radio('field', 2, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!} 
</div> 

Javascript код:

function unselectCheckbox(box,field) 
{ 
    if (box.value >= 0) 
    { 
     document.getElementsById(field).checked = false; 
    } 
} 

(У меня также есть яваскрипт функции для удаления кнопки проверяются радио при нажатии на флажок, но я Бесполезная 't включить его в код.)

При использовании вышеуказанного кода я получаю ошибку laravel из-за одиночных кавычек вокруг' field_empty '. Удаление одиночных кавычек не приводит к работе js. Использование двойных кавычек приводит к «"» в сгенерированном html.

Конечно, я мог бы использовать простой html вместо лезвия - и поэтому не рекомендуется использовать {!! !!}, но мне было интересно, можно ли это сделать в лезвии или, может быть, используя другой подход в javascript?

---

Edit: Моя форма содержит несколько элементов, которые должны быть проверены. Каждый элемент имеет свое собственное имя, с соответствующим флажком для подтверждения пустого значения:

<div> 
    {!! Form::checkbox('field1_empty', 1, null, ['id' => 'field_empty']) !!} 
</div> 
<div> 
    {!! Form::radio('field1', 0, null) !!} 
    {!! Form::radio('field1', 1, null) !!} 
    {!! Form::radio('field1', 2, null) !!} 
</div> 
<div> 
    {!! Form::checkbox('field2_empty', 1, null, ['id' => 'field_empty']) !!} 
</div> 
<div> 
    {!! Form::radio('field2', 0, null) !!} 
    {!! Form::radio('field2', 1, null) !!} 
    {!! Form::radio('field2', 2, null) !!} 
</div> 
<div> 
    {!! Form::checkbox('field3_empty', 1, null, ['id' => 'field_empty']) !!} 
</div> 
<div> 
    {!! Form::radio('field3', 0, null) !!} 
    {!! Form::radio('field3', 1, null) !!} 
    {!! Form::radio('field3', 2, null) !!} 
</div> 

Answer 1

Значение атрибута можно избежать, передав его в качестве HtmlString экземпляра, который не будет сбежавшими.

{!! Form::radio('field', 0, null, ['onClick' => new Illuminate\Support\HtmlString("unselectCheckbox(this,'field_empty')")]) !!} 

---

Это, как говорится, имеющий onclick события, определенные рядный на элементе, как правило, считается плохой идеей. Вы должны обрабатывать события со стороны JavaScript, поэтому вам не нужно включать свойства onClick в определение элемента. Таким образом, HTML должен выглядеть следующим образом:

<div> 
    {!! Form::checkbox('field_empty', 1, null, ['id' => 'field_empty']) !!} 
</div> 
<div> 
    {!! Form::radio('field', 0, null) !!} 
    {!! Form::radio('field', 1, null) !!} 
    {!! Form::radio('field', 2, null) !!} 
</div> 

И на JavaScript, который обрабатывает это должно выглядеть следующим образом:

(function() { 
    var empty = document.getElementById('field_empty'); 
    var radios = document.getElementsByName('field'); 

    // When clicking on any of the radio buttons, uncheck the field_empty checkbox 
    for (var i = 0; i < radios.length; i++) { 
     radios[i].onclick = function() { 
      // The "if (box.value >= 0)" condition is useless here 
      // because it will always be true, so I removed it 
      empty.checked = false; 
     }; 
    } 

    // When clicking on the empty checkbox, uncheck the radio buttons 
    empty.onclick = function() { 
     for (var i = 0; i < radios.length; i++) { 
      radios[i].checked = false; 
     } 
    }; 
})(); 

Вот working example приведенного выше кода. Как вы можете видеть, нет необходимости в внешних функциях, таких как unselectCheckbox, потому что вся логика обрабатывается в функциях событий.

---

Существует также версия JQuery, который значительно короче и более читаемым, что версия ваниль JS:

(function() { 
    var empty = $('#field_empty'); 
    var radios = $('[name=field]'); 

    radios.click(function() { 
     empty.prop('checked', false); 
    }); 

    empty.click(function() { 
     radios.prop('checked', false); 
    }); 
})(); 

А вот working example версии JQuery.