почему после события клика в div меняется data-type с save на edit , а программа видить только который был загружен изначально?
$('.language_level').click(function(){
var parent_block = $(this).closest( ".language-block" );
var type = parent_block.data('type');
if (type === 'save') {
parent_block.attr('data-type','edit');
}//Посмотреть в барузере меняется на edit
console.log(type);//save
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group language-block col-md-12 " data-profile_id="{{$dataTypeContent->id}}" data-type="save">
<div class="col-md-6">
<input class="language_level languages" data-language_id="{{$language->id}}" type="checkbox" name="language[]" value="">
<label class="lang-label" for="language_{{$language->id}}">{{$language->title}}</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="1" checked="" disabled>
<label for="">1</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="2" disabled >
<label for="">2</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="3" disabled>
<label for="">3</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="4" disabled>
<label for="">4</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="5" disabled>
<label for="">5</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="6" disabled>
<label for="">6</label>
</div>
</div>
Ответы (2 шт):
Автор решения: uberchel
→ Ссылка
Похоже jQuery сохраняет в память все значения с атрибутов data, поэтому при изменении через attr, в data будет старое значение, так что вам надо либо и получать значение также через attr, либо использовать везде data
$('.language_level').click(function(){
var parent_block = $(this).closest( ".language-block" );
var type = parent_block.data('type');
if (type == 'save') {
parent_block.data('type','edit');
}
console.log(type);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group language-block col-md-12 " data-profile_id="{{$dataTypeContent->id}}" data-type="save">
<div class="col-md-6">
<input class="language_level languages" data-language_id="{{$language->id}}" type="checkbox" name="language[]" value="">
<label class="lang-label" for="language_{{$language->id}}">{{$language->title}}</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="1" checked="" disabled>
<label for="">1</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="2" disabled >
<label for="">2</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="3" disabled>
<label for="">3</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="4" disabled>
<label for="">4</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="5" disabled>
<label for="">5</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="6" disabled>
<label for="">6</label>
</div>
</div>
Автор решения: doox911
→ Ссылка
Нет смысла в использовании Jquery, так как кода и так мало. Можно было бы ещё и сеттеры с геттерами заюзать...
// Элемент
const checkbox_element = document.querySelector('input[type="checkbox"].languages');
// Чтобы не было магического текста
const EDIT = 'edit';
const SAVE = 'save';
// Функция установки значения, хотя я бы оперировал булевым значением
const setFlag = value => value ? EDIT : SAVE;
// Будет вызываться по клику на чекбокс. Пробегается по всем радио и либо блокирует либо наоборот
const updateDisabled = () => {
document.querySelectorAll('input[type="radio"].language_level').forEach(el => el.disabled = flag === SAVE);
};
// Инициализируем значение
let flag = setFlag(checkbox_element.checked);
// Навешиваем событие
checkbox_element.addEventListener('click', function() {
flag = setFlag(this.checked);
updateDisabled();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group language-block col-md-12 " data-profile_id="{{$dataTypeContent->id}}" data-type="save">
<div class="col-md-6">
<input class="language_level languages" data-language_id="{{$language->id}}" type="checkbox" name="language[]">
<label class="lang-label" for="language_{{$language->id}}">{{$language->title}}</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="1" checked="" disabled>
<label for="">1</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="2" disabled>
<label for="">2</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="3" disabled>
<label for="">3</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="4" disabled>
<label for="">4</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="5" disabled>
<label for="">5</label>
</div>
<div class="lang-radio col-md-1">
<input type="radio" id="" class="language_level" name="lang-level-{{$language->id}}" value="6" disabled>
<label for="">6</label>
</div>
</div>