почему после события клика в 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>

→ Ссылка