diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 85bfd03a3cf7508bd331f0177f9edd9d859fba6a..de6e5149a876e07cdf553b372e0235c91bad2ef0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -76,6 +76,7 @@ export default {
         <a
           href="#modal_merge_info"
           data-toggle="modal"
+          :disabled="mr.sourceBranchRemoved"
           class="btn btn-sm inline">
           Check out branch
         </a>
diff --git a/changelogs/unreleased/42255-disable-mr-checkout-button-when-source-branch-deleted.yml b/changelogs/unreleased/42255-disable-mr-checkout-button-when-source-branch-deleted.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bd7e0d3a1b0c0a0acd4412a4bd902db8986524c8
--- /dev/null
+++ b/changelogs/unreleased/42255-disable-mr-checkout-button-when-source-branch-deleted.yml
@@ -0,0 +1,5 @@
+---
+title: Disable MR check out button when source branch is deleted
+merge_request: 16631
+author: Jacopo Beschi @jacopo-beschi
+type: fixed
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 06f89fabf42974c4a820b4e1c0ca1985aa6adc66..93bb83ca8bdd577af9e83828da144bcc8ee9cd23 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -48,20 +48,23 @@ describe('MRWidgetHeader', () => {
   describe('template', () => {
     let vm;
     let el;
+    let mr;
     const sourceBranchPath = '/foo/bar/mr-widget-refactor';
-    const mr = {
-      divergedCommitsCount: 12,
-      sourceBranch: 'mr-widget-refactor',
-      sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
-      targetBranchPath: 'foo/bar/commits-path',
-      targetBranchTreePath: 'foo/bar/tree/path',
-      targetBranch: 'master',
-      isOpen: true,
-      emailPatchesPath: '/mr/email-patches',
-      plainDiffPath: '/mr/plainDiffPath',
-    };
 
     beforeEach(() => {
+      mr = {
+        divergedCommitsCount: 12,
+        sourceBranch: 'mr-widget-refactor',
+        sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
+        sourceBranchRemoved: false,
+        targetBranchPath: 'foo/bar/commits-path',
+        targetBranchTreePath: 'foo/bar/tree/path',
+        targetBranch: 'master',
+        isOpen: true,
+        emailPatchesPath: '/mr/email-patches',
+        plainDiffPath: '/mr/plainDiffPath',
+      };
+
       vm = createComponent(mr);
       el = vm.$el;
     });
@@ -82,6 +85,8 @@ describe('MRWidgetHeader', () => {
       expect(el.textContent).toContain('Check out branch');
       expect(el.querySelectorAll('.dropdown li a')[0].getAttribute('href')).toEqual(mr.emailPatchesPath);
       expect(el.querySelectorAll('.dropdown li a')[1].getAttribute('href')).toEqual(mr.plainDiffPath);
+
+      expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBeNull();
     });
 
     it('should not have right action links if the MR state is not open', (done) => {
@@ -101,5 +106,16 @@ describe('MRWidgetHeader', () => {
         done();
       });
     });
+
+    it('should disable check out branch button if source branch has been removed', (done) => {
+      vm.mr.sourceBranchRemoved = true;
+
+      Vue.nextTick()
+        .then(() => {
+          expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBe('disabled');
+          done();
+        })
+        .catch(done.fail);
+    });
   });
 });